ng-app angular的根元素,从这里开始编译DOM
ng-model 声明变量,并将元素的值绑定到这个变量中
遍历 ng-repeat
一般用在列表和下拉菜单
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
自定义指令
看来angular是全局变量
<body> <div ng-app="app"> <!-- 调用方法1 --> <say-hello></say-hello> </div> <script> // 获取到app实例 var app = angular.module("app",[]); //添加say指令 app.directive("sayHello",()=>{ return { //一定要template,直接返回字符串不行 template : "<h1>Hello World!</h1>" }; }); </script> </body>
控制器controller,里面写的是页面的业务逻辑
变量名一定要驼峰,不然会解析错误的
其实ide也报错了
很多坑,如果有某些地方漏了,整个模板都会不起作用。。
<body> <!-- 这里必须指定要使用的controller名字 --> <div ng-app="app" ng-controller="myCtrl"> <!-- <input>标签代表输入框 --> <input type="text" ng-model="firstName"><br> <input type="text" ng-model="lastName"><br> <!-- 不能直接用变量fullName,因为没有办法直接声明,只能用函数 --> <div> {{fullName()}} </div> </div> <script> var app = angular.module('app',[]); app.controller('myCtrl',($scope)=>{ $scope.firstName = "hello"; $scope.lastName = "world"; //声明函数,注意不要加() $scope.fullName = ()=>{ return $scope.firstName+" "+$scope.lastName; } }); </script> </body>
外部文件中的控制器
和js一样,肯定是要分开文件写的,只需要在script标签里面引入js即可,其他写法/使用方法一样
<script src="personController.js"></script>