您的位置：首页 > Web前端 > AngularJS

Angular入门知识点总结

2017-04-26 20:58 531 查看
知识点总结

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航