AngularJS学习笔记

来源：互联网发布：p城办事处优化器编辑：程序博客网时间：2024/06/05 20:23

一:特点及优点

数据双向绑定
基本模板标识符
表单验证
路由
深度链接
组件重用
依赖注入

二:直接上手

一个简单的工程:

myapp/index.html    //主页面,包括所有页面共有的header,footer,导航栏等,有一个使用ng-view标签占位的<div></div>接受局部刷新.myapp/index-app.js  //控制整个工程的js文件.注意:1所有的controller都需要在此文件内注册才可以使用;2路由信息需在此文件中写明myapp/sensitive/index.html  //负责填充的子页面myapp/sensitive/controller.js   //子页面对应的控制

示例代码:

myapp/index.html

<!DOCTYPE html><!--被ng-app标签包含的部分由AngularJS控制,本例中是控制整个html--><html lang="en" ng-app="app">    <head>        <meta charset="utf-8">        <title>微博管理系统</title>        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>        <script src="js/bootstrap.min.js"></script>        <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>        <script src="js/angular.js" type="text/javascript"></script>        <!--负责控制页面路由-->        <script src="js/angular-route.js" type="text/javascript"></script>        <script src="index-app.js" type="text/javascript"></script>    </head>    <body>        <div class="container">            <div class="row">            <!--左侧导航栏-->                <div class="col-md-3">                    <div class="well" style="padding: 8px 0;">                        <ul class="nav nav-list">                            <li><a href="#/sensitive"><i class="glyphicon glyphicon-eye-open"></i> 敏感词设置</a></li>                        </ul>                    </div>                </div>                <!--右侧占位-->                <div ng-view="" class="col-md-9"></div>            </div>        </div>        <script src="sensitive/controller.js" type="text/javascript"></script>    </body></html>

myapp/index-app.js

var app = angular.module('app', [    'ngRoute',    'sensitive.controller']);app.config(['$routeProvider', function ($routeProvider) {        $routeProvider                .when('/', {                    redirectTo: '/home'                })                .when('/home', {templateUrl: "index.html"})                .when('/sensitive', {templateUrl: "sensitive/index.html"})                .otherwise({                    redirectTo: '/home'                });    }]);

myapp/sensitive/index.html

<div data-ng-controller="sensitiveCtrl">这样就能显示:{{value}}</div>

myapp/sensitive/controller.js

angular.module('sensitive.controller', [])        .controller('sensitiveCtrl', function ($scope, $http) {            $scope.value=123;//直接赋值,实际使用多从后台取值,方法如下            /*            $http.get('myapp/api/value')            .success(function (data) {                $scope.value = data;            }).error(function () {                alert("失败");            })            */        })

0 0