Angular 2 In 60 Minutes
Вставка
- Опубліковано 29 вер 2024
- UPDATED 2019 VERSION HERE - • Angular Crash Course (...
12 Project Angular 2 Course:
www.eduonix.co...
MY COURSES:
www.traversymed...
CODE DOWNLOAD:
github.com/bra...
SUPPORT THIS CHANNEL WITH A CUP OF COFFEE PER MONTH:
/ traversymedia
ONE TIME DONATIONS:
www.paypal.me/t...
Guys, this is an old tutorial. I have remade this for Angular 4
ua-cam.com/video/KhzGSHNhnbI/v-deo.html
i have learned angularjs and want to know angular ,should i learn angular 4 or 2
yeah me too..where to start 2 or 4 i studied node express mongo only angular to go..please reply
still good though. :) thanks for crash course, good way to get us up to speed.
Traversy Media i
Read this thinking it was a joke, didn't even know 4 existed ¬_¬
after one month of struggling finally I understand the angular concept, thank you, man, you've made my day
I have watched many tutorials on Angular, but none of them made sense to me. After watching your tutorial, I now understand the basics. Thanks for such a great tutorial. Subscribed for life lol
Your this 60 minutes tutorial landed me a high paying job. I had no idea about angular 2 and I went through this tutorial just an hour before the interview and cracked the interview. Thanks a lot man!!
That is so awesome. Thats the stuff that gives me the drive to keep going and making videos. Congrats
Great dude, I am also preparing for an interview and this is the first tutorial I am studying without a former angular knowledge. This tutorial is great !!
That's awsome. your comment inspires me to watch the lecture
same here..
congratulation you got job in which company?
Thank you Brad. Great course and easy to follow for beginners. Also bought your 12 projects course.
As i started this 60 minutes projects with the blank starter, i installed the modules via npm install.
It generated an error that i fixed by replacing in package.json file the line "@types/selenium-webdriver": "^2.53.33" by "@types/selenium-webdriver": "2.53.33"
I then had to type the vars in the following functions in user.component.ts file :
addHobby(hobby:string){
this.hobbies.push(hobby);
}
deleteHobby(i:number){
this.hobbies.splice(i,1);
}
Everything works fine for now.
I learned a lot.
A big thx.
Best regards.
Thanks Brad, this is the best crash course to start with Angular out there.
Thanks so much for this Tutorial! I've been researching AngularJS and Angular 2 for the past month. It didn't click until I watched this!
Hi Brad, I've already bought 6 of your web dev courses on Udemy. You are an uber developer! I love the way you teach! Thank you for making this stuff look easy.
Awesome! I have experience in front-end development, and i needed quick start for Angular. Thank you, that really helped me :)
Very good job and tutorial for a beginning look at Angular. Thanks for putting this together!
At 30:37 ,instead of typing "Hobbies" twice, you could have just placed it outside the curly brackets and put the conditions inside the curly brackets. Like this
{{showHobbies ? "Hide" : "Show"}} Hobbies
Anyway, nice tutorials by the way.
Nice thing to start with. I come from 1.4 and this tutorial introduced me nicely to the concepts. It's actually very close in some aspects to react
Hi,
As soon as started watching this i felt like finally i found someone tutoring straight forward and to the point, i have only one question, what is the difference between this and the 14 hours paid course ? is it just project examples ? also i suggest that you keep even the paid courses short as it's really helpful to have short and to the point ones like this.
Thanks
Awesome introduction man! I will check your 12 project right now!
Most helpful crash course so far.
Great video 👍
Quick note that latest Angular2/TypeScript will throw an error on addHobby(hobby), this works:
addHobby(hobby: string){...}
I love this tutorial, your teaching skills. You're Super Awesome Man :)
I like your lectures. Signed up the for 12'er.
Very Helpful & Simplified. Thanks
Thank You very very much for the nice tutorial,
I wish God helps you as you help me.
Thank you, it is so good
Ayoub, Morocco !
very very good tutorial for the beginer. Maybe the best tutorial i ever see :) thanks u so much
Very complete crash course. Thanks!
Great video Brad! Please keep them coming!
I like the excellent, clear presentation. I do have a question though, with regards to the service (injectable) that gets created.
Where does one find out the info that you had to know? Ie. What docs did you refer to?
Also, for the import of "rxjs/add/operator/map"
What was your source of documentation? I'm sure there is lots more to know.
Thanks in advance!
Great AngularJS2 Tutorial I ever saw.
Thank you for the tutorial. Helped me to understand basics of angular2.
keep it up..
Great explanation...cleared basic concepts...
Thank you so much for this lesson. It helped me a lot.
thank you very much... best tutorial guide ever
Tanks for this quick tutorial.
Please add a login with API tutorial.
@36:44 - the WebStorm linter complains about an ambiguous type on hobby. I fixed this by making the line: "addHobby(hobby: string) {" following the previous pattern.
nice tutorials for beginner person
wow this is so helpful and great starting point for me. Thank you so much for this and all your efforts. greetings from Costa Rica! #puravida
Really Nice Tutorial. Could you please do one series on Progressive Web App.
Thank you for such an informative tutorial;
Awesome tutorial! Thank You.
Subscribed !! Awesome video !! Thank u so much for this !!
Awesome Video Brad.
Why in 2017 we should again use command line, manage manually dependencies, start server at localhost manually and all this steps should to be done to only setup an app, while in visual studio we have templates and can create working app in three clicks. Feel like a step back for dev comfort.
Advanced User it depends, in a manual way you have full control.
Very interesting tutorial ! thanks a lot !
Great video, thank you
Thank you brad you are great
Thank you so much for this tutorail ¡ keep up the good work¡
superb tutorial man.. thanks :)
Great Tutorial !!!
Nice course
Thank you!
Well done Thank you so much
"Why do I keep mistyping this?" Because you refuse to use autocomplete.
Could you please make a video that shows how to separate the JS and TS files to different folders
Thanks Brad , I have a quick query as you mention this is not an mvc or mvvm then what pattern are they following when you look on angular1 that is mvc pattern
thank you
Nice one man, this is the best video I've seen so far to introduce Angular
I agree!
Thanks Brad. Very good tutorial. Can you provide the source codes ?
github.com/bradtraversy/angular60
Thanks for existing.
Hey Brad, I bought your courses before I came across this video, and I just want to say, your courses have helped me more than any other course I've done. You are amazing. and keep doing what you are doing. - you are helping so many people understand and I feel you really get this technology revolution. would love to see how you develop these sites along side blockchain technologies in the future. Tom!
Thats really great to hear. Thanks Tom :)
from where u bought the course . can you please share the link. Thank you.
www.eduonix.com/courses/Web-Development/learn-angular-2-development-by-building-10-apps
29:30 line 40, shorter form:
this.showHobbies = !this.showHobbies;
30:30 line 9 could be:
{{showHobbies ? 'Hide':'Show'}} Hobbies
cool
k8192 maybe, or they just want to help and further improve the video
40:30 - 47:10 (http.get- request to res.json) this section doesn't work for me. I typed everything in, just like @TraversyMedia (I guess... also a friend of mine looked over the code)
Following errors appear:
Error: [Exception..."" nsresult: "0x805e0006 ()" location: "JS frame :: http:localhost:3000/node_modules/zone.js :: scheduleTask :: line 1990 data: no]
could someone please help me out?
Great instructor. Perfect overview ; cleared up a lot for me. Thank you!
Brad, the video is really helpful to learn Angular2 for beginner. Thank you!
Thanks for your time and effort you put into this video. I found it helpful.
I have a question. In your toggleHobbies method you used "if else" condition, isn't it easier and faster instead of "if else" block just write one line: "this.showHobbies = !this.showHobbies"? or TypeScript doesn't allow you to do that?
The Best Angular 2 course ever :)
really?
thank you alot, this vedio help me to start programing angular2, in the short time, good job.
its awesome! I wonder whats the version that you used in 12 project course ? I am ready to pay it if its packages and ts version not deprecated or older. Thank you!
Thanks Brad, this is the best Angular 2 tutorial with definitly make me understand angular technology!!! God Bless U
@29:47 better way would be - this.showHobbies = !this.showHobbies.
That will simply invert the boolean value and would save us writing an if statement
hahaha i think so
@Traversy Media I have looked into your 12 Project Course but could not find anything in the description about "Tree Shaking", "Minifying" and "Deploying" the projects onto a Hosted Webspace or an Apache Server or ... what ever would be suggested for Angular 2.
Are this topics covered in any of the 12 projects?
[X] Yes >> in what project?
[X] No >> can you suggest any other sources that cover this topics?
thanks dude, that was perfect and I learn a lot from you
NPM is Node Package Manager, not Modules.
this.showHobbies = !this.showHobbies. Overall a really nice Tutorial. Thank you
Great introduction! Thanks for this. It took me many more than one hour to get through it, but I learned a lot. Now I think I will go curl up with a cool adult beverage before attempting another Angular vid.
Freaking awesome. This is the best beginner Angular 2 vid I've seen (and I've watched quite a few).
Great video.... I was really dreading and delaying going from angular 1 to 2 but this made everything simple because it was straight forward and simple.
Till now I have gone through so many sites to explore on Angular 2. But never really felt comfortable. Now I am feeling so sad that I couldn't go through this video earlier. Really fantastic stuff Brad. Thank you so much.
Thanks man very clear and smart video.
Nice explanation, Thank you Brad.
idk if anyone else was having this issue but the 'hobby' parameter in addHobby should be addHobby(hobby: string){}...This was a big frustration for me
I have some issue when I changed this code
this.PostsService.getPosts().subscribe(posts => {
this.posts = posts;
});
To
this.PostsService.getPosts().subscribe(function(posts) {
this.posts = posts;
});
It's not showing anything of posts in the HTML file. Am I wrong with these changes !
Great course Brad, thanks!
For some when I do a NPM start with the finished code, I am getting this error.
src/app/components/user.component.ts(2,28): error TS2307: Cannot find module '../services/posts.service'.
src/app/components/user.component.ts(30,44): error TS7006: Parameter 'posts' implicitly has an 'any' type.
src/app/components/user.component.ts(43,12): error TS7006: Parameter 'hobby' implicitly has an 'any' type.
src/app/components/user.component.ts(47,15): error TS7006: Parameter 'i' implicitly has an 'any' type.
the module is being imported correctly, I think.
import {PostsService} from '../services/posts.service';
Really great tutorial, the format makes it all really clear and easy to understand.
Actually, there are a few small things that can be done more efficiently in the code...
For example:
Instead of this (long) code:
if (this.showHobbies == true) {
this.showHobbies = false;
} else {
this.showHobbies = true;
}
We can simply write:
this.showHobbies = !this.showHobbies;
Another example:
Instead of this (longer) code:
{{showHobbies ? "Hide Hobbies" : "Show Hobbies"}}
We can narrow it down a bit to:
{{showHobbies ? "Hide" : "Show"}} Hobbies
Very good for beginners, all the examples shown above worked for me.
got only these 2 warnings
src/app/components/user.component.ts(74,12): error TS7006: Parameter 'hobby' implicitly has an 'any' type.
src/app/components/user.component.ts(77,15): error TS7006: Parameter 'i' implicitly has an 'any' type.
Getting this error...Help...anyone?
app/components/user.component.ts(66,12): error TS7006: Parameter 'hobby' implicitly has an 'any' type.
[0] 1:18:44 PM - Compilation complete. Watching for file changes.
It's a bit disappointing that you just brush over the generation of the js files when you created 'user.component.ts'....I wasn't seeing that magic....
=== PROBLEM FACED ===
I am facing a problem, /angular/quickstart runs perfectly as default.
But when I create my own component (user) as demonstrated in 19:00 - 21:00 I get this error on the chrome: GET localhost:3000/traceur 404 (Not Found)
Please help.
Thanks in advance
very good Tutorial......simple and easy to understand....
would you mind to make a tutorial using angularJS 2 with Websocket...?
thanks....
greetings from Malaysia....
If you're watching this in 2018 like me :) . Do know that RxJS 6 (or higher) introduces two important changes compared to RxJS version 5 . So don't forgot to
(i) npm install --save rxjs-compat
(ii) import 'rxjs/add/operator/map';
import { Observable } from 'rxjs';
$ npm install
npm WARN deprecated node-uuid@1.4.8: Use uuid module instead
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
Is this video now out-of-date??
I was looking for a non beginner and non expert course for getting my feet wet with Angular and this is perfect! I love your teaching style, definitely going to for that full 12 project angular course.
Is the code for this video available on plnkr or github? It's a really useful reference as I'm building my own project using some of these fundamentals.
Thanks again for posting this!!!
really awesome tutorial.....but please as at 45:46 of the video time....
this.postService.getPost().subscribe({ });
.subscribe gives error
[ts] Property 'subscribe' does not exist on type 'void'
Is there like a new way to do this i really need help....ASAP.......10/10 video
UA-cam: Stop these annoying and always REPEATING ads in the video!!! When I click the ad away I am NOT INTERESTED in it and I DO NOT WANT to see it ever again!!!!!
Nice Tutorial Brad. While going through the Video I created the same application and was able to execute successfully. My question is, Once everything is done, I closed all the browser, VSCode & GitBash. When I reopened this again and tried to run the application again, it is now working and throwing some errors. Please find the error message below. Can you please let me know how to over come this.
Error:
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\
odejs\
ode.exe" "C:\\Program Files\
odejs\\ node_modules\
pm\\bin\
pm-cli.js" "run" "build"
npm ERR! node v6.10.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! angular-quickstart@1.0.0 build: `tsc -p src/`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the angular-quickstart@1.0.0 build script 'tsc -p src/'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-quickstart pa ckage,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tsc -p src/
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-quickstart
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-quickstart
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! D:\Projects\my-proj
pm-debug.log
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\
odejs\
ode.exe" "C:\\Program Files\
odejs\\ node_modules\
pm\\bin\
pm-cli.js" "start"
npm ERR! node v6.10.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! angular-quickstart@1.0.0 prestart: `npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-quickstart@1.0.0 prestart script 'npm run build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-quickstart pa ckage,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-quickstart
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-quickstart
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! D:\Projects\my-proj
pm-debug.log
I'm getting a prompt when creating addHobby, asking for explicit declaration of datatype in the addHobby function parameter.
No error will be displayed in the browser console, but hobby just won't add.
This is what I was prompted in VS Code: "Parameter 'bobby' implicitly has an 'any' type"
I've changed to the following and things work now.
addHobby(hobby:string){
this.hobbies.push(hobby);
}
Is it the version of that starter pack that caused the difference, ie requiring explicit datatype to the function's parameter? Or is there something I missed?
Very good! Nice and simple. How do you look at the combination of a Microsoft Web API project + AngularJS??? I know Web API and hence I can leverage my knowledge to achieve the Server + Data Layers and then for the client side use AngularJS. Again, thanks.
P.S. I wish your courses were on Pluralsight.
Hello Sir,
I follow you step for calling service but i receive the following warning and not able to get json of response.
function () {
if (typeof this._body === 'string') {
return JSON.parse(/** @type {?} */ (this._body));
}
if (this._body instanceof ArrayBuffer) {
return JSON.par…
Can you please help me you resolve this issue ?
Thanks
Thank you Brad..I have a small question..whenever I use npm start, Internet explorer is opening..how to change it to chrome..sorry if this is a basic question..Thanks
thanks for video ^^
About the issue of 'angular2/core' ---> '@angular/core', the answer is here: stackoverflow.com/questions/37509992/difference-between-angular2-core-and-angular-core
Awesome! good for newbie....was searching for this only, without @angular/cli..Thank you :) Nice explanation ..many doubts got cleared
Hey, you wrote at 32:10
is the name="name" necessary?
I mean, we already declared it and initialized it.
Just asking...
Brad, I just came across your channel right now, thank you for this intro about angular.
I am network admin, but I have some personal projects that I want develop and maybe Angular can help me.
PS: Right now I bought your course "Angular 4 Front To Back" on Udemy and I hope learn a lot with you.
Again, Thank you very much!
Cheers from Brazil.
Great tutorial. The pace was just right for a semi-beginner to UI frameworks.
Having just picked up AngularJS 1.5, I didn't have much trouble picking up most of this. But gosh, the need for imports and apparently redundant declarations seem almost daunting.
The only part that flew a bit over my head was the last few minutes of the video dealing with routing. That all seems rather convoluted (Not the actual route-naming schema, which seemed simple enough). Is there a tutorial that teaches routing in Angular 2 exclusively?
Thanks again, for this video. I might just invest in the 12-ste.. er project course. :)
My Silverlight senses are tingling. Angular2 seems too ambitious... I like what I've seen so far, but Google will need to really improve upon tooling support if they want this to catch on in a big way. The manually adding modules in multiple locations. Having to specifically add a form module, really?
But I will definitely keep my eye on this. Coding tools don't get the love they deserve. Its why C# in VS is so goddamn awesome.
Google should make an Angular Development application, specifically for developing Angular, with every kind of short-cut quality of life improvements that they can think of.
FUCK I am tired of learning yet another way to make the same website every year.