AngularJS (一)

最新推荐文章于 2021-09-17 20:43:50 发布

G-Q

最新推荐文章于 2021-09-17 20:43:50 发布

阅读量242

点赞数 1

分类专栏： jquery angular 文章标签： jquery angularjs

本文链接：https://blog.csdn.net/gq15238209541/article/details/53048011

版权

jquery 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

angular

1 篇文章 0 订阅

订阅专栏

angular是Google公司开发的。MVVM:数据模型双向绑定MVC：model view controller。优势低耦合。

ng-xxx 都是指令。AngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。

AngularJS 表达式写在双大括号内：{{ expression }}。ng-bind="变量"的作用和{{变量}}是一样的都是为了输出变量。

不同点：表达式会闪烁。可以使用ng-cloak防止闪烁。

作用域：
scope：controller范围内有效。
rootScope：所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

url的组成

http://www.baidu.com/?q=条件&q2=条件2#hash

location.search ?q=条件&q2=条件
location.hash #hash

路由功能是基于http协议。核心技术是ajax

<html>
    <head>
    	<meta charset="utf-8">
        <title>AngularJS</title>
    </head>
    <body ng-app='routingDemoApp'>
     
        <h2>AngularJS 路由应用</h2>
        <ul>
            <li><a href="#/">首页</a></li>
            <li><a href="#/computers">电脑</a></li>
            <li><a href="#/printers">打印机</a></li>
            <li><a href="#/blabla">其他</a></li>
        </ul>
         
        <div ng-view></div>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
        <script>
            var app = angular.module('routingDemoApp',['ngRoute'])
            // 控制器 home
            // app.controller("home",function($scope){
            // 	$scope.name = "guoqiang";
            // 	$scope.test = function(){
            // 		alert($scope.name);
            // 	}
            // })
            app.config(['$routeProvider', function($routeProvider){
                $routeProvider
                .when('/',{templateUrl:'sub/home.html',controller:'home'})
                .when('/computers',{templateUrl:'sub/computers.html'})
                .when('/printers',{templateUrl:'sub/printers.html'})
                .otherwise({redirectTo:'/'});
            }]);
        </script>
        <script src="js/home.js"></script><span style="white-space:pre">	</span>//新建js文件引入
    </body>
</html>

home.html代码：

<div ng-controller="home">
	<h2>我是home，第一页</h2>
	<div style="width:100px; height:100px; border:1px solid red;"></div>
	<input type="text" ng-model="name">
	<input type="button" value="测试" ng-click="test()">
</div>

G-Q

关注

1
点赞
踩
0

收藏

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

angular是Google公司开发的。MVVM:数据模型双向绑定MVC：model view controller。优势低耦合。ng-xxx 都是指令。AngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。AngularJS 表达式写在双大括号内：{{ expression }}。ng-bind="变量"的作用和{{变量}}是一样的都是为了输出
复制链接

扫一扫