AngularJS Ng-view Directive With Example - Tutlane

Trang chủ » Ng-view » AngularJS Ng-view Directive With Example - Tutlane

Có thể bạn quan tâm

  • Angularjs tutorial

    Angularjs Tutorial

  •  AngularJS Home
  •  Basics of AngularJS
    •  AngularJS Introduction
    •  AngularJS Environment Setup
    •  AngularJS Hello World
  •  Expressions in AngularJS
    •  AngularJS Expressions
    •  AngularJS Number Expressions
    •  AngularJS String Expressions
    •  AngularJS Object Expressions
    •  AngularJS Array Expressions
  •  Directives in AngularJS
    •  AngularJS Directives
    •  AngularJS ng-app
    •  AngularJS ng-init
    •  AngularJS ng-model
    •  AngularJS ng-repeat
    •  AngularJS ng-bind
    •  AngularJS ng-show / hide
    •  AngularJS ng-switch
    •  AngularJS ng-if
    •  AngularJS ng-include
    •  AngularJS ng-cloak
    •  AngularJS ng-view
    •  AngularJS ng-template
    •  Angularjs Custom Directive
  •  Filters in AngularJS
    •  AngularJS Filters
    •  AngularJS Lowercase Filter
    •  AngularJS Uppercase Filter
    •  AngularJS Number Filters
    •  AngularJS Currency Filter
    •  AngularJS Date Filter
    •  AngularJS OrderBy Filter
    •  AngularJS Filter
    •  AngularJS LimitTo Filter
    •  AngularJS JSON Filter
    •  AngularJS Custom Filter
  •  AngularJS Bindings
    •  AngularJS Data Binding
    •  AngularJS Modules
    •  AngularJS Controllers
    •  AngularJS Scopes
  •  Services in AngularJS
    •  AngularJS Services
    •  AngularJS Factory Service
    •  AngularJS Http Service
    •  AngularJS Http Get Service
    •  AngularJS Http Post Service
    •  AngularJS Http Put Service
    •  AngularJS Http Delete Service
    •  AngularJS Http Jsonp Service
    •  AngularJS Success / Error
    •  AngularJS $location Service
    •  AngularJS $timeout Service
    •  AngularJS $interval Service
  •  Form and Field Validations
    •  AngularJS Forms
    •  AngularJS Form Validations
    •  AngularJS CheckBoxes
    •  AngularJS Radio Buttons
    •  AngularJS Select Box
    •  AngularJS ng-options
    •  AngularJS ng-min / maxlength
    •  AngularJS ng-pattern
  •  Events in AngularJS
    •  AngularJS Events
    •  AngularJS ng-click Event
    •  AngularJS ng-dblclick Event
    •  AngularJS ng-blur Event
    •  AngularJS ng-change Event
    •  AngularJS Cut / Copy / Paste
    •  AngularJS ng-focus Event
    •  AngularJS ng-keydown Event
    •  AngularJS ng-keypress Event
    •  AngularJS ng-keyup Event
    •  AngularJS ng-mousedown
    •  AngularJS ng-mouseenter
    •  AngularJS ng-mouseleave
    •  AngularJS ng-mousemove
    •  AngularJS ng-mouseover
    •  AngularJS ng-mouseup
  •  Central Functions in AngularJS
    •  AngularJS Central Functions
    •  AngularJS $watch()
    •  AngularJS $digest()
    •  AngularJS $apply()
  •  Tables in AngularJS
    •  AngularJS Tables
    •  AngularJS ng-Table
    •  AngularJS Table Pagination
    •  AngularJS Table Sorting
    •  AngularJS Table Filtering
    •  AngularJS UI Grid
  •  Routing in AngularJS
    •  AngularJS Routing
    •  AngularJS Animation
AngularJS ng-view Directive with Example

Here we will learn what is ng-view directive in angularjs and how to use the ng-view directive in angularjs applications with simple example.

AngularJS ng-view Directive

In angularjs, ng-view directive is used to switch between the views in angularJs application. Generally, we will use ng-view directive with route service to change the views based on the defined conditions in angular applications.

AngularJS ng-view Directive Syntax

Following is the syntax of using the ng-view directive in angularjs application.

 

<div ng-app="AngularngviewApp">

<ng-view></ng-view>

</div>

We will see how to use ng-view directive in angularjs application.

AngularJS ng-view Directive Example

To use ng-view directive in angularjs application first open your application and create new HTML page (sample1.html) and write the code like as shown below

 

<h1>{{model.text}}</h1>

Now create another html page in your application and write the code like as shown below

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs ng-view Directive Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>

<script >

var myApp = angular.module("AngularngviewApp", ['ngRoute']);

myApp.config(['$routeProvider',

function ($routeProvider) {

$routeProvider.when('/', {

templateUrl: 'sample1.html',

controller: 'ngviewctrl'

})

}

]);

myApp.controller("ngviewctrl", function ($scope) {

$scope.model = {

text: "This is the example of ng-view in angular js"

}

});

</script>

</head>

<body ng-app="AngularngviewApp">

<div ng-controller="ngviewctrl">

<ng-view></ng-view>

</div>

</body>

</html>

If you observe above code we used route service to switch templates based on requirement. Here we are getting sample1.html page as template and binding that values to ng-view in controller "ngviewctrl". If we run above application we will get output like as shown below. 

Output of AngularJS ng-view Example

Following is the output of using ng-view directive in angularjs application example

 

This is the example of ng-view in angular js

This is how we can use ng-view directive in angularjs application. 

Previous   Next    

Table of Contents

  • AngularJS ng-view Directive
  • Syntax of AngularJS ng-view Directive
  • Example of AngularJS ng-view Directive
  • Output of AngularJS ng-view Directive Example

Từ khóa » Ng-view