初识AngularJS

发布时间：2020-12-17 10:09:46 所属栏目：安全来源：网络整理

导读：前言：为了更好的学习，同时鞭笞自己，坚持写blog 关于AngularJS AngularJS是协助搭建单页面工程的开源前端框架。它通过MVC模式使得开发与测试变得更容易。 AngularJS试图成为WEB应用中的一种端对端的解决方案。它将指导开发整个应用。 AngularJS特性 Angula

前言：为了更好的学习，同时鞭笞自己，坚持写blog

关于AngularJS

AngularJS是协助搭建单页面工程的开源前端框架。它通过MVC模式使得开发与测试变得更容易。
AngularJS试图成为WEB应用中的一种端对端的解决方案。它将指导开发整个应用。

AngularJS特性

Angularjs开发架构-MVC

起源：1979年，Trygve Reenskaug第一次正式提出了MVC模式
Model：数据模型层
View：视图层，负责展示
Controller：业务逻辑和控制逻辑
好处：职责清晰，代码模块化

AngularJS核心--MVC模式

遵循MVC模式开发，鼓励视图、数据、逻辑组件间松耦合。

AngularJS核心-模块化

AngularJS推荐的应用模块组织方式

任何一个ng应用都是由控制器、指令、服务、路由、过滤器等有限的模块类型构成的
控制器、指令、服务、路由、过滤器分别放在一个模块里面。用一个总的app模块作为入口点，它依赖其它所有模块

AngularJS核心-依赖注入

待续

AngularJS核心思想-指令系统

待续

AngularJS核心思想-双向数据绑定

Hello AngularJS

利用bootstrap、AngularJS，写个简单Hello world：

<!DOCTYPE html>
<html ng-app="exampleApp" >
<head>
    <title>AngularJS Demo</title>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script src="angular.js"></script>
    <script>

        var myApp = angular.module("exampleApp",[]);

        myApp.controller("dayCtrl",function ($scope) {
            $scope.day = new Date();
			$scope.hellowolrd = "Hello Wolrd!"
        });

    </script>

</head>
<body >
    <div class="panel" ng-controller="dayCtrl">
        <div class="page-header">
            <h3>AngularJS App</h3>
        </div>
		<h4>{{hellowolrd}}</h4>
        <h4>Today is {{day | date:"yyyy-MM-dd HH:mm:ss"}}</h4>
    </div>
</body>
</html>

效果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!