[javA学习3]angularJS练习1

系统管理员 2022-07-15 14:41 148阅读 0赞

<!DOCTYPE html>
    <html lang="en" ng-app="firstApp">
    <head>
        <meta charset="UTF-8">
        <title>angular测试</title>
        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="ffff.js"></script>
    </head>
    <body>
    
    <div ng-controller="firstController">
        
        姓名：<input ng-model="user.name" type="text" value="World">
        年龄：<input ng-model="user.age" type="number" value="20">
        <p>姓名：{
       {user.name}}</p>
        <p>年龄：{
       {user.age}}</p>
        <p>全局：{
       {globalName}}</p>
        <p>controller根目录：{
       {names}}</p>
        <ul ng-init="names = ['a','b']">
            <li>经过ul的ng-init后:{
       {names}}</li>
            <li ng-repeat="x in names">{
       {x}}</li>
        </ul>
    </div>
    <div secdirective></div>
    
    <h3>如果出现ng-controller的嵌套，且都是一个名字，那么取得的值会分作用域</h3>
    <div ng-controller="EventController">
        <p>myEvent count:{
       {EvnetCount}}</p>
        <ul>
            <li ng-controller="EventController">
                <button ng-click="myEventClick('参数1')">只有本级的</button>
                <button ng-click="$emit('myEvent')">向上传递(包括同级)</button>
                <button ng-click="$broadcast('myEvent')">向下传递(包括同级)</button>
                <p>myEvent count:{
       {EvnetCount}}</p>
                <ul>
                    <li ng-controller="EventController" ng-repeat="item in [1,2]">
                        <p>myEvent count:{
       {EvnetCount}}</p>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    
    
    </body>
    </html>

<pre name="code" class="javascript">/**
     * Created by liyanq on 16/10/18.
     */
    var app = angular.module("firstApp", []);
    app.controller("firstController", function ($scope, $http, $rootScope) {
        $scope.user = {name: "Hello", age: 18};
        $rootScope.globalName = "全局的属性";
        $scope.names = ["Emil", "Tobias", "Linus"];
        $http.post("xx.html", []).success(function (data) {
            if (data) {
    
            }
        });
    }).controller("EventController", function ($scope) {
        $scope.EvnetCount = 0;
        $scope.$on("myEvent", function () {
            $scope.EvnetCount++;
        });
        $scope.myEventClick = function (param1) {
            if (param1 == "参数1") {
                $scope.EvnetCount++;
            }
        }
    });
    app.directive("secdirective", function () {
        return {
            template: "<div>从directive得到的结果</div>"
        };
    });

controller  
   1，不要试图复用controller，一个控制器一般只负责一小块视图。  
   2，不要在controller中操作dom，这不是控制器的职责。因为会导致浏览器从新布局，效率低。  
   3，不要在controller里面做数据的格式化，ng有很好用的表单控件。  
   4，不要在controller里面做数据过滤操作，ng有$filter服务。  
   5，一般来说，controller是不会相互调用的，控制器之间的交互会通过事件进行。  
   6，html里面写了controller，js就必须对其进行处理，否则直接显示\{ \{\}\}。如果有controller，没有值或不设置变量的话，显示空。  
$scope  
1，$scope是一个树形结构，与dom标签平行。  
2，字$scope对象会继承父$scope上的属性和方法。就是controller同名嵌套。  
3，每个angular直有一个根$scope对象。  
4，$scope可以发事件，可以向上或向下，还可以本级。$emit向上,$broadcast向下