Angular 指令初始

最新推荐文章于 2024-06-25 08:33:06 发布

boonyaxnn

最新推荐文章于 2024-06-25 08:33:06 发布

阅读量940

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/boonyaxnn/article/details/90451375

版权

本文介绍了Angular的一些核心指令，包括ng-app用于定义应用范围，ng-model实现双向数据绑定，ng-repeat用于遍历数据，ng-if和ng-show/hide控制元素显示，ng-class用于动态添加样式，还涉及到ng-controller、ng-event等其他指令的使用。

摘要由CSDN通过智能技术生成

1.ng-app 边界指令：规定了使用angular使用范围；在这个ng-app的范围里面可以使用angular语法
ng-app 不赋值
ng-app='myApp'（ang创建模块的时候限制边界，使用）
创建angular模块 ng-app='名称' 一般都要名字

<html lang="en" ng-app='myApp'>//赋值
<html lang="en" ng-app>//不赋值

2.{ {}} 表达式变量函数() 简单的运算
AngularJS 表达式写在双大括号内：{ { expression }}
作用：显示数据把数据显示到视图上面

<h2>{
  {1+2}}</h2>

3.ng-model:内置指令：用在input 双向数据绑定，可以获取input里面输入的内容 textarea
ng-model='msg' 把用户输入的信息数据存储在msg变量上；

 <input type="text" ng-model='msg' ng-init='msg="hello world"'>
  <!-- 展示数据同步 -->
 <p ng-bind='msg'></p>

4.ng-init:初始化数据
说明：ng-init='msg="hello world"'

<div ng-init='mm="期待改变数据"'>
        {
  {mm}}
</div>

5.ng-bind 和{ { }} 显示数据
{ {}} 没有引入angular会显示{ {}}
ng-bind：如果angular没有加载的时候，什什么都不不显示

6.ng-controller=‘名字’

angular设计模式：mvc

关注

专栏目录