AngularJS简介

最新推荐文章于 2024-10-24 17:40:10 发布

bboyjoe

最新推荐文章于 2024-10-24 17:40:10 发布

阅读量592

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/bboyjoe/article/details/50765991

版权

AngularJS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

通过一个简单示例来说明AngularJS的四大特性！

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <title>AngularJS简介</title>
    </head>
    <body>
        <div ng-controller="MyController">
            <input ng-model="greeting.text"/>
            <p><span ng-bind="greeting.text"></span>,Angular</p>
            <hello></hello>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script>
        //定义模块
        var myModule=angular.module('MyModule',[]);
        //双向数据绑定、MVC
        myModule.controller('MyController',['$scope',function($scope){
            $scope.greeting={
                text:'Hello'
            }
        }]);
        //自定义指令
        myModule.directive('hello',function(){
            return {
                restrict: 'E',
                template: '<div>{{greeting.text}} everyone!</div>',
                replace: true
            }
        });
    </script>
</html>

最后实现的效果是：