Angular1.0的面试题目汇总(持续更…

本文详细对比了Angular1.0中ngRoute与ui-router两种路由方案的特点及使用方式,并介绍了ng-if与ng-show的区别。
Angular1.0的面试题目汇总(持续更新)

1,angular 中的 ui-router与ngRoute的区别
(ps:参考链接 http://yijiebuyi.com/blog/3aab7ad8bccb22b4a881849c0593d5e2.html
 angular.js 是一种富客户端单页面应用,所以要在一个页面呈现不同的视图,路由起到了至关重要的作用.

(1)angular.js 为我们封装好了一个路由工具 ngRoute ,它是一种靠url改变去驱动视图.

        angularUI 也为我们封装了一个独立的路由模块 ui-router ,它是一种靠状态 state 来驱动视图.

(2)ngRoute 和 ui-router使用时需要ui中用ui-view指令指定 如:

ngRoute

使用时需要ui中用ng-view指令指定 如:<</span>div ng-view></</span>div>

url改变此区域会被刷新.

首先要配置注册 ngRoute 

var app = angular.module(“YIJIEBUYI", ['ngRoute']);                

app.config(function ($locationProvider) { 

});

路由设置:

angular.module(‘YIJIEBUYI').config(['$urlRouterProvider',

function($urlRouterProvider) {

$urlRouterProvider

.when(“/blog", “/blog/index")

.otherwise("/blog/index");

});

ui-router

使用时需要ui中用ui-view指令指定 如:

需要下载 ui-route 文件.

首先配置注册 ui-route(src\webapp\scripts\app.js)

var app = angular.module(“YIJIEBUYI", [‘ui.router']);                              

app.config(function () {      //路由配置 })


路由设置 (src\webapp\apps\myApp\route.js):

angular.module(‘YIJIEBUYI').config(['$stateProvider',

function($stateProvider) {

    $stateProvider.state('myComm.mv', {

            abstract: true,

            url: '/mv',

            template: '

     });

        $stateProvider.state('myComm.mv.manager', {

            url: '/manager',

            templateUrl: '/apps/manoApp/mv/mv-manager.tpl.html',

            controller: 'MvManagerCtrl'

    });

});

2. ng-if和ng-show的区别?

ng-if会移除dom,生成dom,而ng-show只是改变其display属性。

    ng-if判断结果如果为false,那么不会加载(没有DOM结构)。
ng-show 判断结果如果为false,那么,只不过不显示在页面上,还是会加载(display:none)。 

4.JSP全名为Java Server Pages,一种动态网页技术标准,它实现了Html语法中的java扩展(以
### Angular 1.0 入门教程与基础指南 Angular 1.0AngularJS 的最初版本,它为开发者提供了一种结构化的方式来构建动态的单页应用程序(SPA)。AngularJS 1.0 的核心特性包括双向数据绑定、依赖注入、指令系统以及模块化架构。 #### 核心概念 1. **模块(Module)** AngularJS 应用程序通过模块来组织代码。模块是应用的容器,包含了控制器、服务、指令等组件。模块的定义方式如下: ```javascript var app = angular.module('myApp', []); ``` 这里 `myApp` 是模块的名称,`[]` 表示该模块依赖的其他模块。如果模块不需要依赖项,则可以留空数组。 2. **控制器(Controller)** 控制器用于管理作用域(`$scope`)中的数据和行为。`$scope` 是连接控制器和视图的桥梁,所有的数据和方法都可以通过 `$scope` 绑定到视图上。例如: ```javascript app.controller('MainCtrl', function($scope) { $scope.message = "Hello, Angular 1.0!"; }); ``` 在视图中,可以通过 `{{message}}` 来显示该数据。 3. **指令(Directive)** 指令是 AngularJS 中最强大的功能之一,它允许开发者扩展 HTML 的行为。常见的内置指令有 `ng-model`、`ng-bind`、`ng-repeat` 等。自定义指令可以通过 `.directive()` 方法来定义,例如: ```javascript app.directive('myDirective', function() { return { template: '<div>This is a custom directive.</div>' }; }); ``` 在视图中使用 `<my-directive></my-directive>` 即可调用该指令。 4. **服务(Service)** 服务用于封装可重用的业务逻辑或数据访问层。AngularJS 提供了多种创建服务的方式,如 `factory`、`service` 和 `provider`。以下是一个使用 `factory` 创建服务的示例: ```javascript app.factory('myService', function() { var service = {}; service.getData = function() { return "Data from service"; }; return service; }); ``` 控制器中可以通过依赖注入的方式使用该服务: ```javascript app.controller('MainCtrl', function($scope, myService) { $scope.data = myService.getData(); }); ``` 5. **配置(Config)** 配置块用于设置应用的全局配置,通常用于配置路由、拦截器等。配置块通过 `.config()` 方法定义: ```javascript app.config(function($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/home.html', controller: 'HomeCtrl' }) .otherwise({ redirectTo: '/' }); }); ``` 6. **运行块(Run Block)** 运行块在应用启动时执行,通常用于初始化全局变量或监听全局事件。运行块通过 `.run()` 方法定义: ```javascript app.run(function($rootScope) { $rootScope.title = "Angular 1.0 Application"; }); ``` #### 开发环境搭建 要开始开发 Angular 1.0 应用,首先需要安装 Node.js 和 npm(Node Package Manager)。安装完成后,可以使用 Bower 或 npm 来安装 AngularJS: ```bash npm install -g bower bower install angular ``` 或者直接通过 CDN 引入 AngularJS: ```html <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> ``` #### 简单示例 以下是一个简单的 AngularJS 应用示例,展示了如何使用控制器、作用域和双向数据绑定: ```html <!DOCTYPE html> <html ng-app="myApp"> <head> <title>Angular 1.0 Example</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script> var app = angular.module('myApp', []); app.controller('MainCtrl', function($scope) { $scope.name = ''; $scope.reverseName = function() { $scope.reversedName = $scope.name.split('').reverse().join(''); }; }); </script> </head> <body ng-controller="MainCtrl"> <h1>Hello, {{ name || 'Angular 1.0' }}!</h1> <input type="text" ng-model="name" placeholder="Enter your name" /> <button ng-click="reverseName()">Reverse Name</button> <p>Reversed Name: {{ reversedName }}</p> </body> </html> ``` #### 学习资源 为了好地学习 Angular 1.0,建议参考以下资源: 1. **官方文档**:[AngularJS 1.x Documentation](https://docs.angularjs.org/guide) 2. **书籍**:《AngularJS: Up and Running》 by Shyam Seshadri 3. **在线课程**:Udemy 上的 [AngularJS for Beginners](https://www.udemy.com/course/angularjs-for-beginners/) 课程 4. **社区论坛**:Stack Overflow 和 GitHub 上的 AngularJS 项目页面 通过这些资源,您可以逐步掌握 AngularJS 的核心概念,并能够构建功能丰富的单页应用程序。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值