Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/planetoftheweb/angular

Repository for my tutorial course: Learning AngularJS on LinkedIn Learning and Lynda.com. http://raybo.org/angular
https://github.com/planetoftheweb/angular

angular angularjs angularjs1 frameworks javascript linkedinlearning lynda-com rayvillalobos training tutorial webdevelopment

Last synced: 11 days ago
JSON representation

Repository for my tutorial course: Learning AngularJS on LinkedIn Learning and Lynda.com. http://raybo.org/angular

Awesome Lists containing this project

README 

        
# Learning AngularJS

This is the repository for my course Learning AngularJS. The full course is available on [LinkedIn Learning](https://www.linkedin.com/learning/learning-angularjs-1-2?trk=insiders_6787408_learning) and [Lynda.com](https://www.lynda.com/Angular-tutorials/Learning-AngularJS-1/648940-2.html)



[![Learning AngularJS](https://media-exp2.licdn.com/media-proxy/ext?w=1200&h=675&f=n&hash=YnuHOMOMmky3gvaKUxtocy%2B2%2FUo%3D&ora=1%2CaFBCTXdkRmpGL2lvQUFBPQ%2CxAVta5g-0R6plxVUzgUv5K_PrkC9q0RIUJDPBy-nXy2j_tWfZnPhcMPfZLSiolkScSsAlwAyf-arRjTiFI69LcLmY4Yx3A)](https://www.linkedin.com/learning/learning-angularjs-1-2?trk=insiders_6787408_learning)



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](https://github.com/planetoftheweb/rayveal) 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

1. Make sure you have these installed

	- [node.js](http://nodejs.org/)

	- [git](http://git-scm.com/)

	- [gulp](http://gulpjs.com/)

2. Clone this repository into your local machine using the terminal (mac) or Gitbash (PC) `> git clone CLONEURL`

3. CD to the folder `cd FOLDERNAME`

4. Run `> npm install` to install the project dependencies

5. Run `> gulp` to start live preview server



## More Stuff

Check out some of my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/ray-villalobos?trk=insiders_6787408_learning) and [lynda.com](http://lynda.com/rayvillalobos). You can follow me on [LinkedIn](https://www.linkedin.com/in/planetoftheweb/), read [my blog](http://raybo.org), [follow me on twitter](http://twitter.com/planetoftheweb), or check out my [youtube channel](http://youtube.com/planetoftheweb).



# Learn AngularJS

This is the repository for my course, [Learn AngularJS](http://www.lynda.com/AngularJS-tutorials/Up-Running-AngularJS/154414-2.html). 



## 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.



1. Make sure you have these installed

	- [node.js](http://nodejs.org/)

	- [git](http://git-scm.com/)

	- [gulp](http://gulpjs.com/)

2. Clone this repository into your local machine using the terminal (mac) or Gitbash (PC) `> git clone https://github.com/planetoftheweb/angular.git`

3. CD to the folder `cd angular`

4. Run `npm install` to install the project dependencies

5. 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](http://www.lynda.com/Web-Web-Design-tutorials/Web-Project-Workflows-Gulpjs-Git-Browserify/154416-2.html).



## More Stuff

Check out some of my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/ray-villalobos). You can also check out my [youtube channel](http://youtube.com/planetoftheweb), [follow me on twitter](http://twitter.com/planetoftheweb), or read [my blog](http://raybo.org).