angularjs1- ng-include

简介:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="../angular.min.js"></script>
    <style>
        .red{ background:red;}
        .yellow{ background:yellow;}
    </style>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="firstController">
        <div ng-bind="text"></div>
         <div ng-include="url"></div>
    </div>
</div>
<script type="text/javascript">
    var app = angular.module('myApp',[]);
    app.controller('firstController',['$scope','$interval',function($scope,$interval){
        //$scope.text = '<h1>hello</h1>';
        $scope.text = 'hello';
        $scope.url = 'test.html';
    }]);
</script>
</body>
</html>
复制代码
复制代码
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="../angular.min.js"></script>
    <style>
        .red{ background:red;}
        .yellow{ background:yellow;}
    </style>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="firstController">
        <div ng-bind="text"></div>
          <div ng-include="url"></div>
          <div ng-include="tpl"></div>
         <div ng-include src="tpl2"></div>
    </div>
    //以script方式引入模版
    <script type="text/ng-template" id="tpl.html">
        Content of the template.111111111111
    </script>
    <script type="text/ng-template" id="tpl2.html">
        Content of the template.2222222222
    </script>
</div>
<script type="text/javascript">
    var app = angular.module('myApp',[]);
    app.controller('firstController',['$scope','$interval',function($scope,$interval){
        //$scope.text = '<h1>hello</h1>';
        $scope.text = 'hello';

        $scope.url = 'test.html';

        $scope.tpl = 'tpl.html';
        $scope.tpl2 = 'tpl2.html';

    }]);
</script>

</body>
</html>
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/7225580.html,如需转载请自行联系原作者

相关文章
|
监控 网络协议 数据安全/隐私保护
云MAS中CMPP3.0协议封装与移动短信状态报告状态码说明
云MAS中CMPP3.0协议封装与移动短信状态报告状态码说明
1341 1
|
传感器 Linux
在Linux中使用libmodbus库进行Modbus RTU主从机通信
Modbus RTU是一种常见的工业通信协议,用于在自动化系统中传输数据。libmodbus是一个流行的C库,用于在Linux系统上实现Modbus通信。本文将介绍如何使用libmodbus库在Linux上创建Modbus RTU主从机通信的示例代码。
5816 0
|
安全 C语言
【C语言刷题】字符串逆序
【C语言刷题】字符串逆序
196 0
|
资源调度 JavaScript 编译器
Vite中如何更好的使用TS
【8月更文挑战第4天】Vite中如何更好的使用TS
674 4
Vite中如何更好的使用TS
|
自然语言处理 安全 Unix
【天枢系列 01】Linux行数统计:命令对决,谁才是王者?
【天枢系列 01】Linux行数统计:命令对决,谁才是王者?
232 4
|
Android开发
Android教程之Android 用户界面-表格视图(GridView)
Android教程之Android 用户界面-表格视图(GridView)
102 1
|
Java 中间件 应用服务中间件
一篇文章带你Java Spring开发入门
一篇文章带你Java Spring开发入门
一篇文章带你Java Spring开发入门
|
前端开发 小程序 开发者
【小程序自动化Minium】三、元素定位- WXSS 选择器的使用
【小程序自动化Minium】三、元素定位- WXSS 选择器的使用
【小程序自动化Minium】三、元素定位- WXSS 选择器的使用
|
BI 索引 Python
python中使用xlrd、xlwt操作excel表格详解
python中使用xlrd、xlwt操作excel表格详解
125 0
|
Unix Shell Linux
快速删除工程下所有的node_modules目录
就是如何合理又快速的删除某个工程下所有的node_modules目录; 其实用shell来解决这个场景就很方便了,都不用装第三方依赖; 一般类unix或linux的系统基本自带的两个命令, find rm
449 0