Angular.js入门(1)

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 class="input-group">
10         <input class="from-control" type="text" ng-model="task" />
11         <span class="input-group-btn">
12             <button class="btn btn-default" 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 class="list-group">
18         <li class="list-group-item" 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)" 点击删除时候，根据数组的角标来删除。
 
posted @ 2016-04-27 16:21  耐心_bunny  阅读(542)  评论(0)  编辑  收藏  举报