<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body ng-app="myApp"> <div ng-controller="firstController"> 这是本页面 <!--第一种引入方式--> <div ng-include="url"></div> <!--第二种方式引入文件--> <div ng-include="tpl"></div> <script type="text/ng-template" id="myTpl"> 这是模板 </script> </div> </body> <script src="angular/angular.js"></script> <script type="text/javascript"> var app=angular.module("myApp",[]); app.controller('firstController',function($scope){ /*第一种方式,直接引入外部的模板文件,,,在上面的ng-app中的div引入ng-include*/ $scope.url="demo04.html"; /*在上面的ng-app内部定义script标签,定义id,type属性,并且在$scope挂载id,在div中ng-include=变量名*/ $scope.tpl="myTpl"; }) </script> </html>
在网页的开发中,模板的引入是少不了的,angular中提供两种模板的引入方式,一种是外部文件的模板,另外一种是内部script标签的方式去引入。