AngularJs入门实例

来源：互联网发布：淘宝众筹平台入口编辑：程序博客网时间：2024/05/22 06:28

《一》、四大核心思想

1、MVC
2、模块化和依赖注入
3、双向绑定
4、语义化标签(指令)

《二》、使用ng内置指令

1、ng-app 指令定义了AngularJs应用程序
2、ng-controller 定义了控制器，用于控制 AngularJS 应用
3、ng-init 指令为 AngularJS 应用程序定义了初始值。
4、ng-model 指令把元素值(比如输入域的值)绑定到应用程序
5、ng-bind 指令把应用程序数据绑定到HTML视图
6、ng-repeat 指令实现循环输出(特有属性：$index、$first、$last)
7、ng-hide 指令实现元素显示和隐藏，Dom不会移除
8、ng-if 指令实现逻辑判断，Dom会移除
9、ng-show 属性返回 true 的情况下显示
ng-src、ng-checked、ng-href、ng-class、ng-selected、ng-change、ng-submit、ng-disabled…

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <link rel="stylesheet" href="css/bootstrap.min.css">    <title>AngularJs指令Demo</title></head><body style="padding:20px;" ng-app="todoList"><input type="text" ng-model="data.msg"/><div ng-show="1==1" class="{{data.msg}}">我是一个{{data.msg}}</div><!-- 双向binding绑定 --><div ng-bind="'用户名:'+data.msg"></div><hr><!-- controller的作用域 --><div ng-controller="myFirstCtrl">    名1: <input type="text" ng-model="firstName" ng-init="firstName='John'"><br>    姓1: <input type="text" ng-model="lastName" ng-init="lastName='Doe'"><br>    <br>    姓名: {{firstName + " " + lastName}}    <div ng-controller="mySecondCtrl">        名2: <input type="text" ng-model="firstName"><br>        姓2: <input type="text" ng-model="lastName"><br>        <br>        姓名: {{firstName + " " + lastName}}    </div></div><hr><div ng-controller="TaskCtrl">    <div class="input-group">        <input type="text" class="form-control" ng-model="task">   <span class="input-group-btn">      <button class="btn btn-default" ng-click="add()">提交</button>   </span>    </div>    <!-- 控制"任务列表"的显示和隐藏的两种方法 -->    <h4 ng-if="tasks.length>0">任务列表</h4>    <!--<h4 ng-hide="tasks.length==0">任务列表</h4>-->    <ul class="list-group">        <!-- track by $index 通过下标管理数组，即数组内容可以一样-->        <li class="list-group-item" ng-repeat="item in tasks track by $index">{{item}}            <a ng-click="tasks.splice($index,1)">删除</a>        </li>    </ul></div></body><script src="js/angular.min.js"></script><script type="text/javascript">    angular.module('todoList', [])            .controller('myFirstCtrl', function ($scope) {//AngularJS 控制器控制应用://                $scope.firstName = "John";//                $scope.lastName = "Doe";            })            .controller('mySecondCtrl', function ($scope) {//AngularJS 控制器控制应用:                $scope.firstName = "Tom";                $scope.lastName = "MO";            })            .controller('TaskCtrl', function ($scope) {                $scope.task = "";                $scope.tasks = [];                $scope.add = function () {                    $scope.tasks.push($scope.task);                }            });</script></html>

《三》、使用Directive自定义HTML组件

1、匹配模式：元素名(E)、属性(A)、类名(C)、注释(M)

     a、元素名：<runoob-directive></runoob-directive>     b、属性：<div runoob-directive></div>     c、类名：<div class="runoob-directive"></div>     d、注释：<!-- directive: runoob-directive -->

2、使用驼峰法来命名一个指令，runoobDirective；但在使用它时需要以 - 分割, runoob-directive:

<body ng-app="myApp"><runoob-directive></runoob-directive><div runoob-directive></div><div class="runoob-directive"></div><!-- directive: runoob-directive --><script src="js/angular.min.js"></script><script>    var app = angular.module("myApp", []);    app.directive("runoobDirective", function() {        return {            restrict : "EACM", //不写的话，默认A            replace : true,  //替换掉自定义runoobDirective标签            template : "<h1>自定义指令!</h1>"  //如：templateUrl: 'hello.html'        };    });</script><p><strong>注意:</strong> 需在该实例添加<strong>replace</strong> 属性，否则注释不可见</p><p><strong>注意:</strong> 设置 <b>restrict</b> 的值为 "EACM" 中某个/某几个调用对应指令。</p></body></html>

《四》、Directive与Controller之间的会话

1、link函数一般用来操作DOM、绑定事件监听器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link rel="stylesheet" href="css/foundation.min.css"/>    <title>Directive与Controller之间的会话</title></head><body style="padding: 20px;" ng-app="app"><div ng-controller="AppCtrl">    <div enterattr="delData()">I'm here!</div>    <hello></hello>    <food apple orange>所有水果</food>    <food orange>苹果</food></div><script src="js/angular.min.js"></script><script type="text/javascript">    var app = angular.module('app', []);    app.controller('AppCtrl', function ($scope) {        $scope.loadMoreData = function () {            alert("正在加载数据...");        }        $scope.delData = function () {            alert("正在删除数据...");        }    });    app.directive('enterattr', function () {        return function (scope, element, attrs) {            element.bind('mouseenter', function () { //绑定鼠标经过事件                element.addClass('alert-box'); //添加属性                scope.$apply(attrs.enterattr);//获取并执行属性值——delData()函数            })        }    });    app.directive('hello', function () {        return {            restrict: 'E',            template: '<div><input ng-model="txt" ></div><div>{{txt}}</div>',            link: function (scope, element) {                scope.$watch('txt', function (newVal) { //监听txt的值                    if (newVal === 'error') {                        element.addClass('alert-box');                    }                })            }        }    });    app.directive('food', function () {        return {            restrict: 'E',            scope: {}, //每个指令都有一个自己独立的scope            controller: function ($scope) {                $scope.foods = [];                this.addApple = function () {                    $scope.foods.push('apple');                }                this.addOrange = function () {                    $scope.foods.push('orange');                }            },            link: function (scope, element, attrs) {                element.bind('mouseenter', function () {                    console.log(scope.foods);                });            }        }    });    app.directive('apple', function () {        return {            require: 'food', //引入上面的自定义food组件            link: function (scope, element, attrs, foodCtrl) { //foodCtrl是上面的food的controller控制器                element.bind('mouseenter', function () {                    foodCtrl.addApple();                });            }        }    });    app.directive('orange', function () {        return {            require: 'food', //引入上面的自定义food组件            link: function (scope, element, attrs, foodCtrl) { //foodCtrl是上面的food的controller控制器                element.bind('mouseenter', function () {                    foodCtrl.addOrange();                });            }        }    });</script></body></html>

有个小bug，第一次划过“苹果”并没添加成功，知道原因的望留言指点，感激不尽

《五》、scope作用域

1、$scope 中变量和方法的使用

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link rel="stylesheet" href="css/foundation.min.css"/>    <title>登录</title></head><body style="padding:20px;" ng-app="app"><div ng-controller="MyCtrl">    <!-- 使用$scope中的方法 -->    <input type="text" ng-model="msg">    <h3>{{myReverse()}}</h3>    <input type="text" ng-model="user.name">    <input type="text" ng-model="user.pwd">    <div class="button" ng-click="login()">登录</div>    <div class="alert-box" ng-show="errormsg.length>0">{{errormsg}}</div></div></body><script src="js/angular.min.js"></script><script type="text/javascript">    angular.module('app', [])            .controller('MyCtrl', function ($scope) {                $scope.msg = "";                $scope.user = {name:'', pwd: ''};//name和pwd两个属性；$scope.user.name和$scope.user.pwd                $scope.errormsg = "";                $scope.myReverse = function () { //自定义反转函数                    return $scope.msg.split("").reverse().join("");                }                $scope.login = function() {                    if($scope.user.name === 'admin' && $scope.user.pwd === '12345') {                        console.log($scope.user);                        alert("登录成功");                    } else {                        $scope.errormsg = "用户名或密码输入错误!";                    }                }            })</script></html>

《六》、Controller之间共享数据

依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。以下5个核心组件用来作为依赖注入：value、constant、factory、service、provider
value和constant来设置全局变量。service依赖注入，利用service把需要共享的数据注入给需要的controller。

<body style="padding: 20px;" ng-app="myApp"><div ng-controller="myCtrl">    <input ng-model="msg">    <h3>{{content}}</h3>    <h3>{{website}}</h3>    <h3>{{data.fmsg}}</h3>    <h3>{{uname}}</h3></div><script src="js/angular.min.js"></script></body><script>    var app = angular.module('myApp', []);//AngularJS 模块定义应用:    app.value('realname', 'tom') //value的值可以被修改            .constant('http', 'www.baidu.com')//constant不可修改            .factory('Data', function() {                return {                    fmsg: '你好啊',                    setMsg: function() {                        this.fmsg = '我不好';                    }                }            })            .service('User', function() {//service只实例化一次，任意注入service都使用同一个实例                this.firstName = "上官";                this.lastName = "飞燕";                this.getName = function() {                    return this.firstName + this.lastName;                }            })            .controller('myCtrl', function ($scope, realname, http, Data, User) {//AngularJS 控制器控制应用:                $scope.msg = "您好";                $scope.content = realname;                $scope.website = http;                $scope.data = Data;//                Data.setMsg();                $scope.uname = User.getName();            });</script></html>

全部代码地址：http://download.csdn.net/detail/mqy1023/9535921

参考链接：
1、http://www.runoob.com/angularjs/angularjs-tutorial.html
2、《AngularJs》:http://www.imooc.com/learn/156
3、AngularJs视频：http://www.jikexueyuan.com/course/angularjs/

1 0