你的位置:首页 > Java教程

[Java教程]Angular.js入门


1.Angular优点

    1. 模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令;
    2. 是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能;
    3. 自定义Directive,比jQuery插件还灵活,但是需要深入了解Directive的一些特性。
    4. ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助,我们的项目从上线到目前,UI变化很大,在摸索中迭代产品,但是js的代码基本上很少改动。
 
2.核心思想
依赖注入,模块化,双向绑定,语义化标签
 
3.适合的开发工具
sublime  webStorm
调试工具--->chrome
 
4.为了效果看起来更好,引入了bootstrap.min.css

 
(1)实现目标

 
在文本框内输入文本,点击提交之后,展示在任务列表中(以下是实现代码)
 1 <!doctype html> 2 <html lang="en" ng-app="todoList"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>todoList</title> 6   <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 7 </head> 8 <body ng-controller="TaskCtrl"> 9   <div >10     <input type="text" ng-model="task" />11     <span >12       <button ng-click="add()">提交</button>13     </span>14   </div>15   <h4 ng-hide="tasks.length==0">任务列表</h4><!--先生成标签-->16   <!-- <h4 ng-if="tasks.length>0">任务列表</h4>需要时候才生成标签-->17   <ul >18     <li ng-repeat="item in tasks">{{item}}19       <a href="javascript:;" ng-click="tasks.splice($index,1)">删除</a>20     </li>21   </ul>22   <script type="text/javascript" src="js/angular.js"></script>23   <script type="text/javascript">24    var app = angular.module('todoList',[]);25      app.controller('TaskCtrl', function ($scope) {26      $scope.task = '';27      $scope.tasks = [];28      $scope.add = function(){29         $scope.tasks.push($scope.task);30       };31     });32   </script>33 </body>34 </html>

Angular demo1

 


注意:
(1)<html lang="en" ng-app="todoList">         var app = angular.module('todoList',[]);
在标头添加ng-app="名字",和JS里边模块名字对应。
(2)ng-repeat="item in tasks"   重复,tasks 与JS中的数组名称对应。
(3)<body ng-controller="TaskCtrl"> 添加控制器,与JS中控制器名字对应。
(4)ng-model="task"  文本框输入的值,与JS中变量名字对应。
(5)ng-click="add()" 添加点击事件,在JS中添加点击事件的方法。
(6)ng-hide="tasks.length==0"  数组的长度为0的时候,标题提示不显示。
(7)ng-click="tasks.splice($index,1)" 点击删除时候,根据数组的角标来删除。