AngularJS的简单使用

Posted 东风杨柳岸,岁月如烟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS的简单使用相关的知识,希望对你有一定的参考价值。

官网下载:AngularJS

路由视图需要:Angular-Route.js

基于zepto的轻量级的 javascript UI 库: App.js  用于开发跨平台的移动Web应用

<!DOCTYPE html>
<html ng-app=‘mainApp‘>

<head>

<title>简单AngularJS使用</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scalable=1" name="viewport">

</head>

<body>

 

<ul>

  <li><a href="#/">直接显示内容</a></li>

  <li><a href="#templet">引用其他页面</a></li>

</ul>

<!-- ng-view  相当于thinkphp里的  $this->display(); 用来实现页面渲染 -->

<div ng-view></div>

 

<!-- AngularJS -->
<script src="js/angular.min.js"></script>

<script src="js/angular-route.js"></script>

<script src="js/app.js"></script>

<script>

/* mainApp controller */

angular.module(‘mainApp‘, [‘ngRoute‘])

  .config([‘$routeProvider‘, function ($routeProvider) {

    $routeProvider

      .when(‘/‘, {

        template: "这是直接显示内容"

      })

      .when(‘/templet‘, {

        templateUrl: "templet.htm"

      });
  }]);

</script>

</body>

</html>

以上是关于AngularJS的简单使用的主要内容,如果未能解决你的问题,请参考以下文章

angularjs2 简单使用起始篇

AngularJS:如何使用多部分表单实现简单的文件上传?

AngularJS的简单使用(入门级)

AngularJS 实现简单购物车

angularjs 学习笔记 简单基础

简单介绍AngularJs Filters