angular 学习笔记1

作者: black白先森 | 来源:发表于2016-10-03 18:48 被阅读35次

Angular学习笔记1
angular 学习笔记1
[持续更新] - 从Angular7升级至Angular8，记录
Angular4 组件通讯方法及DOM的操作使用
Angular学习笔记（1）架构概览
spark_learn
Angular笔记1
Angular学习笔记
angular学习笔记
Angular学习笔记

一个页面引用多个控制器

    <div ng-app="app1" ng-controller="myController">
        {{name}}
    </div>

    <div id="app2" ng-app="app2" ng-controller="myController1">
        {{name1}}
    </div>

    <div id="app3" ng-app="app3" ng-controller="myController3">
        {{name3}}
    </div>

    <script src="../node_modules/angular/angular.js"></script>
    <script>
    // 第一个模块
    var app = angular.module('app1',[]);

    app.controller('myController',function($scope){
        $scope.name = '追梦';
    });
    
    // 第二个模块
    var app2 = angular.module('app2',[]);

    app2.controller('myController1',function($scope){
        $scope.name1 = "懦夫";
    });

    // 这行代码 启动多个 ng-app
    angular.bootstrap(document.getElementById("app2"), ['app2']);

    // 第二个模块
    var app3 = angular.module('app3',[]);

    app3.controller('myController3',function($scope){
        $scope.name3 = "懦夫232";
    });

    // 这行代码 启动多个 ng-app
    angular.bootstrap(document.getElementById("app3"), ['app3']);

    </script>

一个控制器里面控制多个模块

<body ng-app="app">
    <h1>可以再一个主模块中创建多个子模块</h1>
    <!-- 第一个 -->
    <div ng-controller="myController">
        {{name}}
    </div>
    <!-- 第二个 -->
    <div ng-controller="myController1">
        {{name2}}
    </div>
    <script src="../node_modules/angular/angular.js"></script>
    <script>
    // 创建主模块
    var app = angular.module('app',['suna','sunb']);
    // 创建模块1
    var sunapp1 = angular.module('suna',[]);
    // 创建控制器
    sunapp1.controller('myController',function($scope){
        $scope.name = "AAA";
    });

    var sunapp2 = angular.module('sunb',[]);

    // 创建模块2
    sunapp2.controller('myController1',function($scope){
        $scope.name2 = "sadas";
    });
    </script>
</body>

关于 $log 打印和解决闪烁问题

// ng-bind 有局限性，ng-cloak会在加载完后被清除，所以建议这个,如果有多个子元素，
ng-cloak就要放在 父元素上面
// 还有一个方法，把angular.js 的引用提前，因为出现表达式，是因为angular没有被加载
.ng-cloak {display:none;} // 重要
<body ng-app="app" ng-controller="myController">
// 解决闪烁第一种方法
    <p ng-bind="name"></p><!-- 里面不放内容 -->
    <p class="ng-cloak">{{name}}</p>
      {{name}}
    <script src="../node_modules/angular/angular.js"></script>
    <script>
        // 创建模块
        var app = angular.module('app',[]);
        // 控制器
//这里 controller 第二个参数传递数组形式，为了解决代码压缩问题
        app.controller('myController',['$log','$scope',function($log,$scope){
            $scope.name = "name";
            $log.log('.log')
        }]);
    </script>
</body>