AngularJS上手初体验

angularjs这个框架出来也很长时间了，可惜之前的项目都没用到它，所以也没有深入研究。闲暇之余写几个小demo，体验一下这个框架的特性吧。

关于如何使用这个框架就不详细说明了，网上教程一大堆。angularjs作为一个典型的MVC框架，一切都是从模块（module）出发，模块下对应各自控制数据显示的控制器（controller），通过指令（directive）实现对DOM修改，绑定事件等操作，下面简单体验一下它的特性。

双向数据绑定

先贴一段简单代码：

    <div>
        <input type="text" ng-model="string.text">
        <p>{{string.text}}</p>
        <p ng-bind="string.text"></p>
    </div>

创建一个input，使用内置指令ng-model绑定输入框的值到$scope变量中，然后通过{{}}或置指令ng-bind同步显示数据。

ng-bind是从scope−>view的单向绑定；ng−modle是scope <-> view 的双向绑定。

ng-model指令需要和input、select等指令进行配合使用。当在元素加上ng-model指令后，框架会负责数据和视图的自动同步。

在输入框输入任意值都能同步显示在下方p标签中：

这里推荐使用内置指令ng-bind来同步数据，用{{}}在网络不稳定时，页面会显示代码内容：

双向数据绑定当然不仅仅用来数据同步显示，某些场景用户对表单任意修改都能自动同步到$scope对象中，提交时只需我们把绑定的$scope对象内的数据直接发送到后台。（想起早先用jQuery时，还要自己获取表单内的值，保存在自定义对象中，再提交后台……）双向数据绑定甚至可以用来直接操作css。

    <div ng-controller="bg-color">
        <input type="text" ng-model="color">
        <p class="bg-{{color}}">测试css样式</p>
    </div>

app.controller('bg-color', ['$scope', function($scope) {
    $scope.color = 'red';
}]);

    <style type="text/css">
    .bg-red {
        background: red;
    }
    
    .bg-green {
        background: green;
    }
    </style>

通过在input内输入red，green控制背景颜色：

无需类似jQuery那样，通过增加class内标签来修改css样式。

路由

通过URL哈希属性可以实现页面无刷新跳转，从而给用户流畅的体验，angularjs也提供了路由模块。

<body>
    <ul>
        <li><a href="#!">首页</a></li>
        <li><a href="#!computer">电脑</a></li>
        <li><a href="#!hello">欢迎</a></li>
        <li><a href="#!books/list">书架</a></li>
        <li><a href="#!blabla">其他</a></li>
    </ul>
    <div ng-view></div>
</body>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>

var app = angular.module('myapp', ['ngRoute', 'bookStoreCtrls']); //依赖注入ngRoute路由模块，自定义模块

//在config配置文件中，配置$routeProvider,用来定义路由规则
//angularJS模块中的config函数用于配置路由规则，通过使用configAPI，我们请求把$routerProvider注入到我们的配置函数，
//并使用routeProvider.when 来定义我们的路由规则
//template:string,字符串被添加到ng-view中，templateUrl:string, url地址中的文件被添加到ng-view中
app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {
            template: '首页'
        })
        .when('/computer', {
            template: '电脑'
        })
        .when('/hello', {
            templateUrl: 'tpls/hello.html',
            // 调用的控制器名称
            controller: 'HelloCtrl'
        })
        .when('/books/list', {
            templateUrl: 'tpls/list.html',
            controller: 'BooksList'
        })
        .otherwise({
            redirectTo: '/'
        });

}]);

var bookStoreCtrls = angular.module('bookStoreCtrls', []);
// 新建一个自定义模块bookStoreCtrls，需要在入口依赖注入

// 创建该模块下的控制器
bookStoreCtrls.controller('HelloCtrl', ['$scope', function($scope) {
    $scope.greeting = {
        text: 'Hello'
    };
}]);
bookStoreCtrls.controller('BooksList', ['$scope', function($scope) {
    $scope.books = [{
        name: '第一本书'
    }, {
        name: '第二本书',
        author: '8899'
    }, {
        name: '第三本书',
        author: 'sda'
    }];
}]);

通过改变哈希可以实现页面无刷新跳转。

ng-route只能用于简单层次的路由，对于深层嵌套路由，我们可以通过ui-route来实现。

.state('booklist', {
            url: '/{bookType:[0-9]{1,4}}',
            views: { 
                '': {
                    templateUrl: 'tpls/bookList.html'
                },
                'booktype@booklist': {
                    templateUrl: 'tpls/bookType.html'
                },
                'bookgrid@booklist': {
                    templateUrl: 'tpls/bookGrid.html'
                }
            }
        })

主视图页面设置容器，通过templateUrl加载不同的页面，可以更好的实现多人开发。

指令

angularjs通过指令操作DOM，给DOM绑定事件。

var app = angular.module('myapp', []);
app.controller('MyCtrl', ['$scope', function($scope) {
    $scope.console = function() {
        console.log('鼠标移入第一个控制器');
    }
}]);
app.controller('MyCtrl2', ['$scope', function($scope) {
    $scope.console2 = function() {
        console.log('鼠标移入第二个控制器');
    }
}]);

app.directive('mouseenter', function() {
    return {
        restrict: 'EA',
        // ==========================================================
        // restrict---匹配模式说明， 英文意思是"限制；约束；限定",这里指的是匹配我自定义的标签
        // ==========================================================
        // •E　　元素(element) 　　 <hello></hello>
        // •A　　属性(attribute)　　<div hello></div>
        // •C　　样式类(class)　　  <div class="hello"></div>
        // •M　　注释               <!-- directive:hello -->         注意！！！(不常用)
        // 温馨tips: 推荐使用EC或EA匹配模式

        // template: '<p>Hello Angular</p>',
        // templateUrl: '',

        // replace: true,
        // 若此配置为 true 则替换指令所在元素，若为 false 或不指定，则把当前指令追加到所在元素内。
        // 配合template或templateUrl使用

        link: function($scope, element, attrs) {
            element.bind('mouseenter', function(event) {
                // mouseenter标签或属性所在对象绑定事件
                // 鼠标移入后触发其对象上的howconsole属性赋值的方法
                $scope.$apply(attrs.howconsole);
            });
        }
    };
});

    <div ng-controller="MyCtrl">
        <div mouseenter howconsole="console()">鼠标移入触发事件</div>
    </div>
    <div ng-controller="MyCtrl2">
        <mouseenter howconsole="console2()">鼠标移入触发事件</mouseenter>
    </div>

angularjs还有很多知识点，事件的传递，指令的嵌套等……如果要用angularjs开发项目还需要更深入的学习。

AngularJS上手初体验

猜你喜欢