初学AngularJs 神奇的框架

发布时间：2020-12-17 09:58:24 所属栏目：安全来源：网络整理

导读：因为我个人不是经常用git 所以看到 NG的中文官网的教程感觉怪怪的，很不顺畅，所以其英文官网看了下一些例子。今晚只是刚开始接触NG，但我已经被它深深折服。不习惯用git所以没有去布置环境，暂时还没理清楚环境配置之类的内容。直接导入 angular.js文件

因为我个人不是经常用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>

ng-repeat中后面加上了 track by $index是因为如果array中push了重复的内容NG会报错，加上这一句就可以解决。

另外如果要调用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);
			
	};
	
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!