Angular API 核心组件之指令篇

1 ngApp

利用这个指令可以自动触发Angular程序，ngApp指令指定了angular 应用的根节点，一般都会把这个指令绑定在页面的根节点上，例如：<body>或者<html>标签。

每个页面只有一个AngularJs的应用可以被自动触发，文档中第一个ngAPP指令会自动触发AngularJs应用。如果在一个html文档中想触发多个AngularJs的应用，你需要用angular.bootstrap来手动触发。angularJs应用不能互相嵌套。

你可以为angular应用指定一个angular 模块作为根模块，当应用程序被触发时，这个模块就会加载到$injector中，还需要加载应用代码需要后者依赖的其他模块。

<!DOCTYPE html>
<html ng-app="moduleName">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-controller="testCtrl">
<p>1+2={{1+2}}</p>
<script type="text/javascript">
    angualr.module(‘moduleName‘,[])
            .controller(‘testCtrl‘,function(){
                //some code going here
            })
</script>
</body>
</html>

2 a

改写了html a标签的默认行为，当href为空的时候，默认的行为被阻止了，所以不会发生跳转。

3 ngHref

在href属性中直接写angular标记{{hash}}，当用户在angular替换{{hash}}的值之前就点击了链接，那么就会链接到错误的地址，通常会返回404错误。

错误的写法：

正确的写法

4 ngSrc

在src属性中使用angular标记{{hash}}不会得到正确的结果，在angular未替换{{hash}}的值之前，浏览器会通过字面{{hash}}的意思去获取src资源。这样就会导致错误。ngSrc解决了这个问题

有bug的写法：

<img src="http://www.somelinks.com/{{hash}}" />

正确的写法：

<img ng-src="http://www.somelinks.com/{{hash}}" />

时间： 2024-12-29 10:10:40

Angular API 核心组件之指令篇

1 ngApp

2 a

3 ngHref

4 ngSrc