首页 > 分享 > Angular入门知识点总结

Angular入门知识点总结

最新推荐文章于 2022-07-20 16:06:09 发布

阿脆脆脆脆脆 于 2017-04-26 20:58:29 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

知识点总结

1.Angular入门

    (1) ng-app是AngularJS应用程序运行的入口( ng-app="myApp")

    (2)当AngularJS程序要运行时,找到了ng-app开始运行
    (3)运行开始,加载主要模块:myApp模块(var app = angular.module("myApp", []);)

    (4)将一个标签和控制器进行绑定,控制器中的数据,就可以使用在这个标签的内部了

    标注:ng-model用来将表单元素的数据和变量双向绑定

                双大括号中,可以直接写变量名称,和变量的数据绑定,变量的数据发生改变,页面的数据会同时改变

<!DOCTYPE html>
<!--
    入门程序第一弹:
    |-- ng-app="myApp"   程序运行入口,加载myApp模块
        |-- angular.module("myApp", []);
            |-- angular.controller("myCtrl", function(){});
                |-- function($scope) {}
                    |-- $scope.hello = "值";

    <html ng-app="myApp">
        ....
        <div ng-controller="myCtrl">
            ....
            {{hello}}
-->
<!--
    ng-app是AngularJS应用程序运行的入口
        当AngularJS程序要运行时,找到了ng-app开始运行
            运行开始,加载主要模块:myApp模块
-->
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Hello World!</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
    <!-- 将一个标签和控制器进行绑定,控制器中的数据,就可以使用在这个标签的内部了-->
    <div ng-controller="myCtrl">
        <!-- ng-model用来将表单元素的数据和变量双向绑定 -->
        <input type="text" ng-model="hello"><br />
        <input type="text" ng-model="hello"><br />
        <input type="text" ng-model="hello"><br />
        <input type="text" ng-model="hello"><br />
        <input type="text" ng-model="greeting"><br />
        <input type="text" ng-model="greeting"><br />
        <input type="text" ng-model="greeting"><br />
        <!-- 双大括号中,可以直接写变量名称,和变量的数据绑定,变量的数据发生改变,页面的数据会同时改变 -->
        {{hello}}<br />
        {{greeting}}
    </div>
<script>
    /*定义一个Angular模块*/
    var app = angular.module("myApp", []);

    app.controller("myCtrl", function($scope){
        $scope.hello = "hello angularjs!今天开始,要进行JS高级开发部分"
        $scope.greeting = "hello angularjs!今天开始,要进行JS高级开发部分"
    });
</script>
</body>
</html>

相关知识

最详细,快速入门Web前端开发的正确姿势
高中生物基因工程知识点总结
中考生物必考知识点总结
植物的激素调节知识点总结
各种花的知识点,花的结构和类型知识点总结
使用Jasmine在Angular中测试组件:第1部分
花卉栽培知识点总结
中考历史知识点总结:鸦片战争的影响
花卉相关知识点总结
花卉常识知识点总结

网址: Angular入门知识点总结 https://m.huajiangbk.com/newsview1290714.html

所属分类:花卉
上一篇: 常用绿化树木有哪些
下一篇: 奇怪的树木