AngularJS实践(介绍)

最新推荐文章于 2022-03-14 21:44:37 发布

小鱼儿_zhang

最新推荐文章于 2022-03-14 21:44:37 发布

阅读量756

点赞数

分类专栏： AngularJS（前言）文章标签： angularjs

本文链接：https://blog.csdn.net/qq_20261343/article/details/47617839

版权

AngularJS（前言）专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里写图片描述

公共的部分抽取成服务，让控制层来调用，而不是继承
这里写图片描述

这里写图片描述

html:
<!doctype html>
<html ng-app="MyModule"> //相当于java 中的main函数
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <hello></hello> //指令标签
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="HelloAngular_Directive.js"></script>
</html>

js:
var myModule = angular.module("MyModule", []);
//定义指令
myModule.directive("hello", function() {
    return {
        restrict: 'E',
        template: '<div>Hi everyone!</div>',
        replace: true
    }
});

html:
<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="CommonController"> //公共的服务
                <div ng-controller="Controller1"> //公共的控制层
                <p>{{greeting.text}},Angular</p>  //展示控制层中的数据
                <button ng-click="test1()">test1</button>  //点击时，触发控制层中的事件
            </div>
            <div ng-controller="Controller2">
                <p>{{greeting.text}},Angular</p>
                <button ng-click="test2()">test2</button>
                <button ng-click="commonFn()">通用</button> //调用公共的服务
            </div>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="MVC3.js"></script>
</html>

js:

//在js中公共的部分抽成服务，由控制层来调用它
function CommonController($scope){
    $scope.commonFn=function(){
        alert("这里是通用功能！");
    };
}

//js 中的控制层1
function Controller1($scope) {
    $scope.greeting = {
        text: 'Hello1'
    };
    $scope.test1=function(){
        alert("test1");
    };
}

//js 中的控制层2
function Controller2($scope) {
    $scope.greeting = {
        text: 'Hello2'
    };
    $scope.test2=function(){
        alert("test2");
    }
}

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="Scope1.css" />
    </head>
    <body>
        <div class="show-scope-demo">
            <div ng-controller="GreetCtrl">
                Hello {{name}}!
            </div>
            <div ng-controller="ListCtrl">
                <ol>
                    <!--循环这个标签-->
                    <li ng-repeat="name in names">
                        {{name}} from {{department}}
                    </li>
                </ol>
            </div>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="Scope1.js"></script>
</html>

js:
//$rootScope:是根作用域，相当于html，在页面中都可以访问的到 
function GreetCtrl($scope, $rootScope) {
    $scope.name = 'World';
    $rootScope.department = 'Angular';
}

//在作用域上挂个数组
function ListCtrl($scope) {
    $scope.names = ['Igor', 'Misko', 'Vojta'];
}

事件的传播：
<ul>
                <li ng-repeat="i in [1]" ng-controller="EventController">
                    <!--事件向上和同级传播-->
                    <button ng-click="$emit('MyEvent')">
                        $emit('MyEvent')
                    </button>
                    <!--事件向下传播，并包含自已-->
                    <button ng-click="$broadcast('MyEvent')">
                        $broadcast('MyEvent')
                    </button>
                    <br>
                    Middle scope
                    <tt>MyEvent</tt> count: {{count}}
                    <ul>
                        <li ng-repeat="item in [1, 2]" ng-controller="EventController">
                            Leaf scope
                            <tt>MyEvent</tt> count: {{count}}
                        </li>
                    </ul>
                </li>
            </ul>

路由和注入：
html:
<!doctype html>
<html ng-app="bookStoreApp">

<head>
    <meta charset="UTF-8">
    <title>BookStore</title>
    <script src="framework/1.3.0.14/angular.js"></script>
    <script src="framework/1.3.0.14/angular-route.js"></script>
    <script src="framework/1.3.0.14/angular-animate.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/services.js"></script>
    <script src="js/directives.js"></script>
</head>

<body>
    <div ng-view> //注入视图
    </div>
</body>

</html>

app.js
//定义模块：bookStoreApp，并且在页面中是当启动点
//[] 中是依赖的模块js，这些js是依赖注入的
var bookStoreApp = angular.module('bookStoreApp', [
    'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
    'bookStoreServices', 'bookStoreDirectives'
]);

//路由配置 
bookStoreApp.config(function($routeProvider) {

  //浏览器地址栏中的不同，则生成不同的视图
   $routeProvider.when('/hello', {
        templateUrl: 'tpls/hello.html', //定义html模版
        controller: 'HelloCtrl'   //定义控制层
    }).when('/list',{
        templateUrl:'tpls/bookList.html',
        controller:'BookListCtrl'
    }).otherwise({//页面一打开就要显示的视图
        redirectTo: '/hello'
    })
});

//定义控层：
var bookStoreCtrls = angular.module('bookStoreCtrls', []);
bookStoreCtrls.controller('HelloCtrl', ['$scope',
    function($scope) {
        $scope.greeting = {
            text: 'Hello'
        };
    }
]);
bookStoreCtrls.controller('BookListCtrl', ['$scope',
    function($scope) {
        $scope.books =[
            {title:"《Ext江湖》",author:"大漠穷秋"},
            {title:"《ActionScript游戏设计基础（第二版）》",author:"大漠穷秋"},
            {title:"《用AngularJS开发下一代WEB应用》",author:"大漠穷秋"}
        ]
    }
]);

/**
 * 这里接着往下写，如果控制器的数量非常多，需要分给多个开发者，可以借助于grunt来合并代码
 */

//html模版：
<ul>
    <li ng-repeat="book in books">
        书名:{{book.title}}&nbsp;&nbsp;&nbsp;作者:{{book.author}}
    </li>
</ul>

双向数据绑定：
引用不现的css样式
<!doctype html>
<html ng-app="MyCSSModule">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="CSS1.css">
</head>

<body>
    <div ng-controller="CSSCtrl">
        <p class="text-{{color}}">测试CSS样式</p>
        <button class="btn btn-default" ng-click="setGreen()">绿色</button>
    </div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="CSS1.js"></script>

</html>

js:
var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('CSSCtrl', ['$scope',
    function($scope) {
        $scope.color = "red";
        $scope.setGreen = function() {
            $scope.color = "green";
        }
    }
])

css:
.text-red {
    background-color: #ff0000;
}
.text-green {
    background-color: #00ff00;
}

解决页面加载时不出现花括号的字样
<div ng-controller="HelloAngular">
            <p><span ng-bind="greeting.text"></span>,Angular</p>
 </div>

<!doctype html>
<html ng-app="MyCSSModule">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="NgClass.css">
</head>

<body>
    <div ng-controller='HeaderController'>
        <!--        
            描述： ng-class：可以写表达式来实现不同的样式，哪个为true，就显示哪个样式
        -->
        <div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div>
        <button ng-click='showError()'>Simulate Error</button>
        <button ng-click='showWarning()'>Simulate Warning</button>
    </div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="NgClass.js"></script>

</html>

js：
var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('HeaderController', ['$scope',
    function($scope) {
        $scope.isError = false;
        $scope.isWarning = false;
        $scope.showError = function() {
            $scope.messageText = 'This is an error!';
            $scope.isError = true;
            $scope.isWarning = false;
        };
        $scope.showWarning = function() {
            $scope.messageText = 'Just a warning. Please carry on.';
            $scope.isWarning = true;
            $scope.isError = false;
        };
    }
])

css:
.error {
    background-color: red;
}
.warning {
    background-color: yellow;
}

单击显示，再单击隐藏
<!doctype html>
<html ng-app="MyCSSModule">

<head>
    <meta charset="utf-8">
</head>

<body>
    <div ng-controller='DeathrayMenuController'>
        <button ng-click='toggleMenu()'>Toggle Menu</button>
        <ul ng-show='menuState.show'>
            <li ng-click='stun()'>Stun</li>
            <li ng-click='disintegrate()'>Disintegrate</li>
            <li ng-click='erase()'>Erase from history</li>
        </ul>
    <div/>
</body>

<script src="js/angular-1.3.0.js"></script>
<script src="NgShow.js"></script>

</html>

js:
var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('DeathrayMenuController', ['$scope',
    function($scope) {
        $scope.menuState={show:false};
        $scope.toggleMenu = function() {
            $scope.menuState.show = !$scope.menuState.show;
        };
    }
])

小鱼儿_zhang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS实践(介绍)

公共的部分抽取成服务，让控制层来调用，而不是继承 html:<!doctype html><html ng-app="MyModule"> //相当于java 中的main函数 <head> <meta charset="utf-8"> </head> <body> <hello></hello
复制链接

扫一扫