My Angularjs Learning Journey

My Angularjs Learning Journey

Basic article

1, the origin of angular2, Comparison of several ways of web page implementation3. Some basic terminology4. Compatibility of angular with other frameworks5. Summary6. Comprehensive example

long before listening to friends talk about Angularjs, but for various reasons, has not been to study. Recently there are colleagues also interested in this framework, we discussed together, and finally "justified" began to study.

The purpose of this article is to record their own two weeks of learning, as a study notes, if the novice friends have a little help, it is a good thing. Hey

1,The origin of angular

The origins of angular can be traced back to the 2009 Google Feedback project. At the time, a member of the team, Misko Hevery, made a bold manifesto: using an open Source library he had developed in his spare time, he could rewrite everything he had at the moment in two weeks. Three weeks later, the amount of code he developed for new applications was compressed from 17000 lines to 1500 rows. Yes, Misko Hevery is the father of angular. He and his colleagues decided to build a team around the ideas he advocated, a simple idea: simplifying the experience requirements of web developers. Finally, more and more developers are angular in their daily lives and have developed into a network of high-quality supporters.

2. Compare several different web implementations   

I believe that we have used a lot of JS libraries, such as the jquery library, ExtJS, such as JS Library, the HTML template string and data mixed together, and then the results inserted into the DOM. Code snippet:

   <tr>            <td>                <input id= "Access" type= "button" value= "Access"/>            </td>            <td >                <div id= "Browser" >                </div>            </td>    </tr>

　　

function (data) {$ ("#browser"). Text (data);}});

View Code

HTML strings and data, such as rails,php,jsp and ASP, are mixed and then sent to the user and the code snippet is displayed:

Echo " Hello, worldn ";? ></body>
View Code
Data binding methods such as Angularjs
Code snippet:
<Divclass= "Row-fluid">        <inputtype= "text"Ng-model= "Query"class= "Form-control"placeholder= "Please enter title" />        <inputtype= "button"Ng-click= "search ()"value= "Search"class= "Btn btn-primary" /> </Div>
View CodeOf course, several ways are different, but I believe you crossing can also be seen, Angular Web rendering on the unique, not for the things, you will see how it is the UI rendering and business logic isolation open.3. Some basic terminology     Before you create your first application, you need to understand some of the concepts in angular. Later, with a simple example, you can quickly access all the important parts of the angular.               But instead of taking the time to explain the details, I focus on helping you build a holistic "overview." 3.1 MVC
The core idea behind MVC is that you should clearly separate the code (model) that manages the data, the application logic code (the controller), and the code that shows the data to the user (view).
The view takes data from the model and then presents it to the user. When the user interacts with the app with a mouse click or keyboard input, the controller makes the corresponding changes and modifies the data in the model.
Finally, the model notifies the view that the data has changed, so that the view can refresh what is displayed in it.
In the angular application, the view is the Document Object Modelo (DOM, the Documentation objects model), the controller is the JavaScript class, and the model data is stored in the object's properties.
3.2 $scope
What is a scope (scope)?
Scope (SCOPE)
is an object that stores the application data model, provides an execution context for an expression, and a scope hierarchy that corresponds to the DOM tree structure.
Scopes can listen for changes in expressions and propagate eventsNote: In fact, it can be easily understood as having the following two chain relationships:
Controller-to-scope--View (DOM)
command-to-scope--View (DOM)
Let's start with an example.
工欲善其事, must first sharp weapon, we need to download angular package from official website, here is using Angularjs v1.1.4
For example, common use only, need to introduce this library to be able.
View
@{Layout = null;}<!DOCTYPE HTML><HTMLNg-app><Head>    <Metaname= "Viewport"content= "Width=device-width" />    <title>Index</title>    <Scriptsrc= "~/scripts/angular/angular.min.js"></Script>    <Scriptsrc= "~/scripts/app/hello2/hello.js"></Script></Head><Body>    <DivNg-controller= "Ctrl">Your Name:<inputtype= "text"Ng-model= "Customer.name">        <ButtonNg-click= ' SayHello () '>Greet</Button>        <P>{{greeting | titlecase}}</P>        <DivMy-customer></Div>    </Div></Body></HTML>
View Code
Controller for the current angular application,
function Mycontroller ($scope) {    = ' world! ' ;     function () {        = ' Hello, ' + $scope. Username;    };}
Here's an explanation, the Ng-app command tells the Angular app management page. If you're building a pure angualr application,
Then you should write the Ng-app directive in the 
<ng-app>  ... .. </ HTML >
Ng-model is the Name property of the customer who binds the controller, which is a two-way binding, which should be easy to understand if you have used Silverlight or WPF.
{{greeting | titlecase}} This is also bound data, is unidirectional, that is, only responsible for the display.
Run up and look at the effect!
Well, the first ANGULARJS program runs!!!
No hurry, you're trying to change the contents of a TextBox,
Yes, you changed the name value, and then the value of the usermame copy changed, and you didn't write the extra code, which is the two-way binding mechanism!
Time relationship, temporarily here ... Go back and talk to everyone!
Resources:
http://angularjs.cn/
"Developing next-generation Web applications with Angularjs"
Reprint Please specify source: Http://www.cnblogs.com/lucky_hu