# learn-angularjs-with-example

**Repository Path**: dabeng/learn-angularjs-with-example

## Basic Information

- **Project Name**: learn-angularjs-with-example
- **Description**: AngularJS is amiable js framework as well as powerful. Let's step to her inch by inch.
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2016-07-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Learn AngularJS with example
AngularJS is amiable js framework as well as powerful. Let's step to her inch by inch.

Before we begin, I put forwrad my individual opinions about AngularJS:

At present, in the field of front-end js framework, a hundred flowers bloom, a hundred schools of thought contend. Personally, I prefer AngularJS, because it supply a comprehensive front-end solution, **make me focus on business logic** rather than high-end techniques full of **obscure syntax and ugly writing**. 

I know there is an argument -- front-end engineers should **move from the monolithic frameworks** like AngularJS and Ember **to the small, dedicated libraries**. But **I don't think so**, if I do that, I have to dispose endless issues on integration of heterogeneous frameworks and put much more effort in digging into every single library in order to adjust some trivial details.

Frankly, I'm a **lazy minimalist**, I **hate** the application that its features provided to the customers are **less than** the quantity of frameworks or libraries it includes. I love to get rid of anything I think of as ‘extra’. Don't waste any 1k of js framework you introduced into the apllication.Don't spend too much time in accomplishing MVC layering or data flowing, beacause we are **deveoping application** on top of framework **not inventing new framework**.

Additionally, someone claims that angularjs **1.x is out**, AngularJS **2.0 is entirely new version**. It looks quite different. I want to wait and see a litte more.But I want to tell you that, by the time the **ES6 era truly arrives**, Which framework is not going to change correspondingly? 

So It's not big deal. It's **too soon to panic** on AngularJS. It's **our mission** and **our fate** to be prepared for change and look forward to learning what is coming around the corner.Isn't it? Come on, just enjoy it.


## [Lesson 1 - jQuery vs AngularJS == outside DOM vs inside DOM](https://dabeng.github.io/learn-angularjs-with-example/outside-dom-vs-inside-dom/)
* [Event-Binding](https://dabeng.github.io/learn-angularjs-with-example/outside-dom-vs-inside-dom/index.html#event-bind)
* [Two-way Data-Binding](https://dabeng.github.io/learn-angularjs-with-example/outside-dom-vs-inside-dom/index.html#data-bind)
* [Show/Hide Control](https://dabeng.github.io/learn-angularjs-with-example/outside-dom-vs-inside-dom/index.html#show-hide)
* [Switch Dom Structure](https://dabeng.github.io/learn-angularjs-with-example/outside-dom-vs-inside-dom/index.html#switch-dom)
* [More free rendering](https://dabeng.github.io/learn-angularjs-with-example/outside-dom-vs-inside-dom/index.html#free-render)
* [Filter is awesome](https://dabeng.github.io/learn-angularjs-with-example/outside-dom-vs-inside-dom/index.html#filter)
* [$watch() + $digest() + $apply()](https://dabeng.github.io/learn-angularjs-with-example/outside-dom-vs-inside-dom/#watcher)

## [Lesson 2 - Angularjs and UI Design](https://dabeng.github.io/learn-angularjs-with-example/angularjs-and-ui-design/collaboration)
* [collaboration between UE designer and ng developer](https://dabeng.github.io/learn-angularjs-with-example/angularjs-and-ui-design/collaboration)
* [Vivify layout of webapp with ngClass & ngAnimate](https://dabeng.github.io/learn-angularjs-with-example/angularjs-and-ui-design/animation)
* [AngularJS Material Design](https://dabeng.github.io/learn-angularjs-with-example/angularjs-and-ui-design/material-design)

## [Lesson 3 - core stuff, cool stuff](https://dabeng.github.io/learn-angularjs-with-example/core-stuff-and-cool-stuff/controller-scope)
* [Controllers and Scopes](https://dabeng.github.io/learn-angularjs-with-example/core-stuff-and-cool-stuff/controllers-and-scopes)
  * [Scope inheritance](https://dabeng.github.io/learn-angularjs-with-example/core-stuff-and-cool-stuff/controllers-and-scopes)
  * [Controller communication](https://dabeng.github.io/learn-angularjs-with-example/core-stuff-and-cool-stuff/controllers-and-scopes/)
* [Directives](https://dabeng.github.io/learn-angularjs-with-example/core-stuff-and-cool-stuff/directives)
  * [Create custom directive -- Tag Pool](https://dabeng.github.io/learn-angularjs-with-example/core-stuff-and-cool-stuff/directives)
  * [Wrapping the existing awesome jQuery plugin -- Datatables](https://dabeng.github.io/learn-angularjs-with-example/core-stuff-and-cool-stuff/directives)
* [service vs factory vs provider](https://dabeng.github.io/learn-angularjs-with-example/core-stuff-and-cool-stuff/services)
* [modules](https://dabeng.github.io/learn-angularjs-with-example/core-stuff-and-cool-stuff/modules)

## Lesson 4 - backend-less development
* ngResource
* ngMockE2E

## [Lesson 5 - practical app demonstration](https://github.com/dabeng/cohort)
* [Cohort](https://github.com/dabeng/cohort)

## [Lesson 6 - sumup and best practices](https://dabeng.github.io/learn-angularjs-with-example/best-practices/sumup.html)
* [Let's sum up what AnguarlJS brings to us](https://dabeng.github.io/learn-angularjs-with-example/best-practices/sumup.html)
* coding style and best practives