因为我个人不是经常用git 所以看到 NG的中文官网的教程感觉怪怪的，很不顺畅，所以其英文官网看了下一些例子。今晚只是刚开始接触NG，但我已经被它深深折服。
不习惯用git所以 没有去布置环境，暂时还没理清楚 环境配置之类的内容。
直接导入 angular.js文件
先上我看的例子: 文件包括 angular.js todo.js todo.css
angular.module('todoApp',[])
.controller('TodoListController',function() {
var todoList = this;
todoList.todos = [
{text:'learn angular',done:true},{text:'build an angular app',done:false}];
todoList.addTodo = function() {
todoList.todos.push({text:todoList.todoText,done:false});
todoList.todoText = '';
};
todoList.remaining = function() {
var count = 0;
angular.forEach(todoList.todos,function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
todoList.archive = function() {
var oldTodos = todoList.todos;
todoList.todos = [];
angular.forEach(oldTodos,function(todo) {
if (!todo.done) todoList.todos.push(todo);
});
};
});
<!doctype html>
<html ng-app="todoApp">
<head>
<script src="js/angular.js"></script>
<script src="js/todo.js"></script>
<link rel="stylesheet" href="css/todo.css">
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoListController as todoList">
<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
[ <a href="" ng-click="todoList.archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todoList.todos">
<label class="checkBox">
<input type="checkBox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</label>
</li>
</ul>
<form ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</body>
</html>
.done-true {
text-decoration: line-through;
color: grey;
}
首先在html 这个Template里面引入官方angular.js文件
另外自己创建了todo.js todo.css文件
html 标签中 引导了ng-app 其模块对应 todoApp 也就是 todo.js(这个control模块的引入必须再angular.js后面) ，该ng-app对应 todo.js里面的
angular.module('todoApp',[])模块
里面有一个控制器:
<pre name="code" class="javascript">controller('TodoListController',function() {
</pre><pre name="code" class="javascript">}而这个控制器对应了 html 中的 ng-contorller,ng-contorller可以放置在任意标签内，但他的作用于则仅限于这个标签
</pre><pre name="code" class="javascript">这里主要的概念有 ng-app ng-controller ng-model ng-repeat
ng-app标志着angular的作用域 ，ng-controller标志着controller的作用域 ng-model 对应着controller里面的model，事实上这样看起来M和C并没有分开，所以算不上是标准的MVC而更像是MVVM的模式,ng-repeat则用于对model的遍历
当V改变的时候，ng-model也随之改变，这也就是NG所说的双向数据绑定中的一个方向，当V内容改变，传给了MODEL，MODEL又传给了问候语{{}}，这就是双向。
而当V改变了M，随着M的改变，V也跟着改变，这就是为什么说它是MVC的一种模式，但看起来又并不像的原因，因为MC没有分出来(或者说是我自己还没学深，毕竟我今天才看了个例子，只是我已经迫不及待想写下这篇博客了，NG真的很有魅力)
大概的重点就是这些了，我尝试着自己去写些小应用就睡觉了
稍微熟悉一下代码：
<!--
作者：250758092@qq.com
时间：2016-09-08
描述：
-->
<!DOCTYPE HTML>
<html ng-app="addList">
<head>
<title>AngularJS 学习之旅</title>
<script type="text/javascript" src="js/angular.js">
</script>
<script type="text/javascript" src="js/todo.js">
</script>
<style type="text/css">
ul li{
list-style: none;
width: 50px;
height: 50px;
background: red;
float: left;
margin-right: 5px;
}
</style>
</head>
<body ng-controller="addlist as list_c">
<ul >
<li ng-repeat="list_num in list_c.listArray track by $index ">{{list_num}}</li>
</ul>
<input ng-model="list_c.add_number" />
<button ng-click="list_c.add_list()">增加LI</button>
</body>
</html>
另外如果要调用C里面的方法，所有的事件绑定都必须是NG封装好的，否则无效，比如 增加LI这个BUTTON，不能用onclick="list_C.add_list()" 而是用ng-click="list_c.add_list()"
angular.module('addList',[])
.controller("addlist",function(){
var listController=this;
listController.listArray=[];
listController.add_list=function(){
listController.listArray.push(listController.add_number);
};
});
原文链接：https://www.f2er.com/angularjs/148902.html