首页 > Web开发 > 详细

angularjs入门----笔记

时间:2019-12-23 23:36:38      阅读:87      评论:0      收藏:0      [点我收藏+]

AngularJs也是一个MVVM的前端js框架。

指令:ng-app/ng-init

ng-app:1.启动angularjs框架;2.告诉angularjs框架从ng-app指令所在标签的开始到结束之间的所有DOM元素都由angularjs框架管理。

注意:1.ng-app一般放在html标签内,用于告诉angularjs框架,整个页面都由angularjs管理;

<html ng-app>
<head>
    <title>Kongs Website</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body>
    <div>{{"hello world!"}}</div>
    <div>{{"hello angularjs!"}}</div>
</body>
</html>

运行结果为:

hello world!
hello angularjs!

2.一个页面默认加载第一个ng-app

<html >
<head>
    <title>Kongs Website</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body>
    <div ng-app>{{"hello world!"}}</div>
    <div ng-app>{{"hello angularjs!"}}</div>
</body>
</html>

 

运行结果为

hello world!
{{"hello angularjs!"}}
 
ng-init:初始化作用域
<html ng-app>
<head>
    <title>Kongs Website</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-init="person={‘name‘:‘jane‘};arr=[‘angularjs‘,‘jquery‘,‘dojo‘]">
    <div>{{person.name}}</div>
    <div>{{arr[0]}}</div>
</body>
</html>

 

运行结果:
jane
angularjs
表达式:{{}} 双大括号中间的部分,比如上述的person.name 和arr[0]

angularjs入门----笔记

原文:https://www.cnblogs.com/xiaoxinstart/p/12088673.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!