Learning AngularJS
This is the repository for my course Learning AngularJS. The full course is available on LinkedIn Learning and Lynda.com
Google designed the AngularJS framework to help developers build web applications with advanced features like declarative templates, data binding, deep linking, and dependency injection. While Angular 2 is now available, many existing applications are built on the first, more mature iteration of the framework. Learning AngularJS is still important for anyone who wants to work in front-end web development.
In this short, practical course, Ray Villalobos uses AngularJS to build a searchable directory—a project you can use as the basis for your own employee or user directory. He explains the MVC architecture underlying AngularJS, and the differences you can expect to encounter in Angular 2. Then he shows how to control the display of DOM elements and data; use services like $http and $routeProvider; modify content with filters; add two-way data binding; and work with routes and templates. Start watching, and learn the simple way to build your own complex web application with AngularJS.
Instructions
This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage. Or you can simply add /tree/BRANCH_NAME to the URL to go to the branch you want to peek at.
Branches
The branches are structured so that they correspond to the videos in the course. So, for example if I name a branch 02_03b then that branch corresponds to the second chapter and the third video in that chapter. The extra letter at the end of the name corresponds to the state of the branch. A b means that this is how the code looks at the beginning of the video, an e means that is how the code looked at the end of the video.
You may find additional branches that correspod to other states, so for example, you may see a t, which means this is a target branch. A target branch is something I use during development or updates of a course and it's for a branch that I'm working towards. For the purposes of taking a course, you may ignore any additional branches. The master branch usually has the state of the project as I'm working through it and the final state of the code when I finish the course.
Documentation
If there are slides for this course, they will be available using the gh-pages branch. You can easily get to the slides by going to http://raybo.org/angular. The slides were created using rayveal.js an opinionated version of the excellent reveal.js framework. Within these slides you can also read my notes for the project, just hit ctrl-m to get a menu with all of the slides for the project.
Installing
- Make sure you have these installed
- Clone this repository into your local machine using the terminal (mac) or Gitbash (PC)
> git clone CLONEURL - CD to the folder
cd FOLDERNAME - Run
> npm installto install the project dependencies - Run
> gulpto start live preview server
More Stuff
Check out some of my other courses on LinkedIn Learning and lynda.com. You can follow me on LinkedIn, read my blog, follow me on twitter, or check out my youtube channel.
Learn AngularJS
This is the repository for my course, Learn AngularJS.
Course Description
Get a fresh look at AngularJS, a "superheroic" framework for building single-page web applications fast. Ray Villalobos shows you how to understand the practical uses of AngularJS with a directory search project—a traditional type of web app you can add to your existing sites. He defines the MVC architecture underlying AngularJS: the model (your data), views (how data is flowed into your template), and controllers (the JavaScript that links the two together). You then learn how to divide your project into modules; work with services like $http, $routeProvider and set up deep linking. Start now, and learn the simple way to build your own complex web application.
Topics include:
- What is AngularJS?
- Working with complex models
- Using a the $http service to read a JSON file
- Binding data
- Dividing your app into partials
- Creating a details template
- Using AngularJS animation events
Instructions
This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage. Or you can simply add /tree/BRANCH_NAME to the URL to go to the branch you want to peek at.
- Make sure you have these installed
- Clone this repository into your local machine using the terminal (mac) or Gitbash (PC)
> git clone https://github.com/planetoftheweb/angular.git - CD to the folder
cd angular - Run
npm installto install the project dependencies - Run the Gulp command
> gulp
For more help setting up a comprehensive Gulp.js workflow, check out Web Project Workflows with Gulp.js, Git, and Browserify.
More Stuff
Check out some of my other courses on LinkedIn Learning. You can also check out my youtube channel, follow me on twitter, or read my blog.