AngularJS学习笔记

最新推荐文章于 2024-07-14 22:26:46 发布

lqshanshuo

最新推荐文章于 2024-07-14 22:26:46 发布

阅读量439

点赞数

分类专栏： web前端文章标签： AngularJS java web

本文链接：https://blog.csdn.net/u011604052/article/details/47087601

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一:特点及优点

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

二:直接上手

一个简单的工程:

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("失败");
            })
            */
        })

lqshanshuo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS学习笔记

一:特点及优点数据双向绑定二:直接上手几个重要的文件:myapp/index.html //主页面,包括所有页面共有的header,footer,导航栏等,有一个使用ng-view标签占位的<div></div>接受局部刷新.myapp/index-app.js //控制整个工程的js文件.注意:1所有的controller都需要在此文件内注册才可以使用;2路由信息需在此文件中写明m
复制链接

扫一扫