angular的基础知识

本文介绍了Angular的基础知识,包括数据绑定的ng-app、ng-model、ng-bind的使用,以及ng-controller和控制器作用域的概念。详细讲解了Angular表达式与JavaScript表达式的区别,如Angular对undefined和null的宽容处理,以及过滤器的运用。同时,通过实例展示了如何解决未加载Angular.js时页面显示未渲染变量的问题以及多个控制器作用域的交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述
一、数据绑定
1、ng-app:使用angular控制哪一块就在哪一块的html中加入ng-app
例如:

<body ng-app>   //表示angular控制整个的body区域

    <!--angular的表达式--!>
  
    {{1+2}}       //在页面上输出3
    {{name}}      //在页面上输出name变量中的值
    {{"name"}}    //在页面上输出name字符串
  <script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>   //注意要引入angular.js文件,从angular官网下载
  <script>
    <!--js表达式--!>
    var string="alert(1+3)";
    eval(string); //eval(string) 函数可计算某个字符串,并执行其中的的 JavaScript 代码
  </script>
</body>

总结:angular表达式与js表达式的区别:
属性求值:js是对于window对象的,即是挂载到window对象上的,而angular所有的属性求值是对于scope的。
宽容:表达式求值对于undefined和null,angular是宽容的,但是js会报错。
没有流程控制语句:angular表达式中不能进行条件分支,循环,抛出异常。
过滤器:可以将表达式的结果传入过滤器链。

2、ng-model:数据的双向绑定(view层<=>model层)

<input type="text" ng-model="name" value="" />
  {{name}}
<input type="text" ng-model="name" value="" />

浏览器中的结果:
在这里插入图片描述
3、ng-controller:控制器

//index.js中文件代码:声明一个控制器
var firstController = function($scope){//注意形参必须是$scope
  $scope.name = "张三";
  $scope.age= "20"}
//index.html中代码
<div ng-app>
  <div ng-controller="firstController">  //在控制器控制的html代码块内的变量由控制器的function定义的变量提供
    <input type="text" ng-model="name" value="" />  
    {{name}}
  </div>
</div>
<script type="text/javascript" src="app/index.js"></script> //引入控制器的声明文件
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>

运行结果:
在这里插入图片描述
4、ng-bind:解决html加载时间导致页面显示未渲染的变量如{{name}}的问题

//index.html中代码
<div ng-app>
  <div ng-controller="firstController">  //在控制器控制的html代码块内的变量由控制器的function定义的变量提供
    <input type="text" ng-model="name" value="" />  
    <div ng-bind="name"></div>  //ng-bind绑定的是当前作用域中name的变量,当angular.js还未加载成功的过程中也不会显示未渲染的变量,而是空白的
  </div> 
</div>
<script type="text/javascript" src="app/index.js"></script> //引入控制器的声明文件
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>

未使用ng-bind未加载angular.js时页面显示:
在这里插入图片描述
使用后未加载angular.js时页面的显示:
在这里插入图片描述
5、多个控制器的作用域问题

<div ng-controller="outer">   //外层控制器
  <input type="text" value="" ng-model="name">
  <div ng-controller="inner">  //内层控制器
    <input type="text" value="" ng-model="name">
  </div>
</div>

原则:angular的控制器的作用域与js的作用域相似
当内层控制器没有声明name时,两个input的值都为外层控制器的name变量值。在浏览器中改变value值(即改变view视图层的value值),不会对外层控制器中的name产生影响,一旦修改了内层input的value值,那么当改变外层input的值或者外层控制器内name的变量值都不会再对内层的name产生影响了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值