I write simple code for understanding ui-router of angular js but code is working properly but my partial html code is automatic renaming, i am unable to undertable why it happing
Html code is <a ui-sref="state1.list">Show List</a>
and browser code is <a ui-sref="state.list" class="ng-scope">Show List</a> due to rename the state1 to state my another partial view is not calling and give error.
Please take a look
<!--index.html-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>Angular UI Router Test </title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
</head>
<body>
<a ui-sref="state1"> State 1</a>
<div ui-view></div>
<script>
var module = angular.module('myApp', ['ui.router']);
module.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/state1');
$stateProvider
.state('state1', {
url: '/state1',
templateUrl: 'partials/state1.html'
})
.state('state1.list', {
url: '/list',
templateUrl: 'partials/state1.list.html',
controller: function ($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
});
}]);
</script>
</body>
</html>
<!--state1.html-->
<h1>State 1</h1>
<hr />
<a ui-sref="state1.list">Show List</a>
<div ui-view></div>
<!--state1.list.html-->
<h3>List of State 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>
what i am missing?
I would say, you are most likely not observing the proper element. I created working plunker here, and it shows, that this:
<a ui-sref="state1.list">Show List</a>
is generated as this
<a ui-sref="state1.list" class="ng-scope" href="#/state1/list">Show List</a>
As we can see no change from state1.list into state.list
The biggest change made? - used are up to date angular and UI-Router versions
Check it here, and maybe try to reset it to the "wrong state described above"
Related
I'm just starting learning the angularjs and I want to use it for creating a ui template. I want to make a static HEADER and FOOTER and the only thing that will be dynamic is the CONTENT. My issue is that my It returns me a blank web page.
Thanks in advance guys.
index.html
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<meta charset="utf-8">
<title>UI-Router</title>
<link rel="stylesheet" href="">
<!-- START LOAD VENDORS -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<!-- END LOAD VENDORS -->
<!-- START LOAD SOURCE CODE -->
<script src="js/app.js"></script>
<!-- END LOAD SOURCE CODE -->
</head>
<body ui-view>
</body>
</html>
app.js
var app = angular.module('app', ['ui.router'])
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index',{
abstract: true,
url: '/index',
templateUrl: 'view/app.html'
})
}])
view/header.html
<ul>
<li>US</li>
<li>626.205.3838</li>
<li>cert#abkrescue.com</li>
<li>Search</li>
</ul>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>LinkedIn</li>
</ul>
view/footer.html
<div>
<span>name here</span>
<span>partner</span>
<span>subscribe</span>
<ul>
<h3>get to know us</h3>
<li>blog</li>
<li>stories</li>
<li>staff</li>
</ul>
<ul>
<h3>connect</h3>
<li>contact</li>
<li>help</li>
<li>request</li>
</ul>
<ul>
<h3>resource</h3>
<li>download</li>
<li>financial</li>
<li>donors</li>
</ul>
<ul>
<h3>get involved</h3>
<li>volunteer</li>
<li>partnership</li>
<li>donate</li>
</ul>
</div>
view/app.html
<div data-ng-include=" 'view/header.html' "></div>
<div data-ng-include=" 'view/footer.html' "></div>
You cannot transition to an abstract state
i've created a working plnkr here: https://plnkr.co/edit/yRazozMjTM99tCKFFmIl?p=preview
$stateProvider
.state('index',{
url: '/',
templateUrl: 'view/app.html'
})
Try using the ui-view element directive. And make sure you are referring the template correctly
<body>
<ui-view></ui-view>
</body>
The correct way to do this is to have separate ui-view directives for your header, content and the footer.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>UI-Router</title>
<link rel="stylesheet" href="">
<!-- START LOAD VENDORS -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<!-- END LOAD VENDORS -->
<!-- START LOAD SOURCE CODE -->
<script src="js/app.js"></script>
<!-- END LOAD SOURCE CODE -->
</head>
<body>
<div ui-view="header">
<div ui-view="content">
<div ui-view="footer">
</body>
</html>
Define the template for each ui-view in the state config function and remove the abstract: true option. More on it here: what is the purpose of use abstract state?
app.js
var app = angular.module('app', ['ui.router'])
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index',{
url: '/index',
views: {
'header': {
templateUrl: 'view/header.html'
},
'content': {
templateUrl: 'view/app.html'
},
'footer': {
templateUrl: 'view/footer.html'
}
}
})
}])
Also wrap your header.html code in a div tag.
header.html
<div>
<ul>
<li>US</li>
<li>626.205.3838</li>
<li>cert#abkrescue.com</li>
<li>Search</li>
</ul>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>LinkedIn</li>
</ul>
</div>
Now the header and footer will remain fixed and you can change your content based on states by adding other state like this:
.state('index.two',{
url: '/index/two',
views: {
'content#': {
templateUrl: 'view/two.html'
}
}
})
I am working in angular.js. Using ng-view navigate in body section. If i need to navigate to a new html page. How we can achieve in angular.js. Is there any angular.js directives in angular.js.
Thanks in Advance,
You should go through following things for routing:
Angular ui-route
Angular ngRoute
Angular-UI-Router is more powerful directive than ngRoute. Following code is what i had tried sometimes before. hope it will also help you.
app.js
var app = angular.module('app', ['ui.router']); //Inject `ui.router` directive inside your `app` module
app.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/home.html',
})
.state('about', {
url: '/about',
templateUrl: 'templates/about.html'
})
}]);
index.html
<html>
<head>
<title>Angular Routing</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="Scripts/app.js"></script>
<script src="Scripts/controllers/homeCtrl.js"></script>
</head>
<body ng-app="app">
<div class="container">
<div ng-include="'templates/header.html'"></div>
<div ui-view></div>
<div ng-include="'templates/footer.html'"></div>
</div>
</body>
</html>
templates/header.html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="home">Angular</a>
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li><a ui-sref="about">About</a></li>
</ul>
</div>
</nav>
templates/footer.html
<p>© SJ</p>
templates/home.html
<h1>Home</h1>
templates/about.html
<h1>About<h1>
I'm new to angular and have been struggling to work out the best angular approach to solving this problem.
I have my shell page which has a place where I would like an element (toolbar) injected for each view.
Each view can have a slightly different toolbar (heading, buttons etc)
I would like to declare this toolbar in markup in the view so that I can bind data to it that the view is already using, and it's easier to maintain.
My understanding is that I could use a view for the injecting, but all the examples I have seen show it being populated from a template referenced in the routing file.
I have seen a directive used for updating the page title which does similar to what I want, https://github.com/apparentlymart/angularjs-viewhead but when I replicated/altered it and tried injecting complex html markup it didn't like it.
What is the recommended angular approach to solving this problem? Am I approaching the problem the wrong way?
Here is a simplified example.
http://plnkr.co/edit/n23vcBAc4tZUqBxnxcaY?p=preview
<!DOCTYPE html>
<html lang="en" data-ng-app="example">
<head>
<meta name="viewport" content="initial-scale=1" />
</head>
<body>
<a ui-sref="view1" class="md-button" >View 1</a>
<a ui-sref="view2" class="md-button" >View 2</a>
<div class="page-contents">
<div class="toolbar">This should be replaced with the toolbar from each page</div>
<div class="content-wrapper">
<div data-ui-view="page"></div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="script.js"></script>
</body>
</html>
<div class="view1" style="background-color: yellow;">
<div class="toolbar-1" style="background-color: gray;">Toolbar 1</div>
<h2>View 1</h2>
<div>View contents</div>
</div>
<div class="view2" style="background-color: lightgreen;">
<div class="toolbar-2" style="background-color: gray;">Toolbar 2</div>
<h2>View 2</h2>
<div>View contents</div>
</div>
angular
.module('example', [
'ui.router'
]);
(function () {
'use strict';
angular
.module('example')
.config(configureRoutes);
configureRoutes.$inject = ['$stateProvider', '$urlRouterProvider'];
/* #ngInject */
function configureRoutes($stateProvider, $urlRouterProvider) {
$stateProvider
.state('view1', {
url: '/view1',
views: {
'page': {
templateUrl: 'view1.html',
}
}
})
.state('view2', {
url: '/view2',
views: {
'page': {
templateUrl: 'view2.html'
}
}
})
$urlRouterProvider.otherwise('/view1');
}
})();
The way i solved this was to create a toolbar service and had it populated from the controller. It didn't achieve my original goal of putting it in markup, but it did simplify the implementation.
I am receiving the following error:
Argument 'mainController' is not a function, got undefined
Which is strange because the code worked before I started adding pages and content to the app.
HTML
<!DOCTYPE html>
<html lang="en" id="top" ng-app="myApp">
<head>
<title>Website</title>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/main.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/main.js"></script>
</head>
<body ng-controller="mainController">
<div class="menu">
<ul>
<li>Messages</li>
<li>Settings</li>
</ul>
</div>
<div class="wrapper" ng-view></div>
</body>
</html>
JS
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/dashboard.html',
controller : 'mainController'
})
// route for the settings page
.when('/settings', {
templateUrl : 'pages/settings.html',
controller : 'settingsController'
});
});
I started my code from a template.
You're confusing referencing a controller instance in your html (which binds it) to actually creating your controller within your application.
Declare it off of your root app module.
myApp.controller('mainController', ['$scope', function ($scope) {
}]};
In addition, since you're declaring a template and a controller pair, you cannot bind your controller on the body element. You should instead bind it within it's respective template.
<div class="menu" ng-controller="mainController">
<ul>
<li>Messages</li>
<li>Settings</li>
</ul>
</div>
If you absolutely want it to be bound to the body element, remove it from your routing declaration.
I am using angularJS in my grails application. Before that, i tried a sample from internet. I tried to use angularJS $routeProvider for the partial views in my main view. My workflows are as follows:
my main view is index.gsp:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body ng-app="routeApplication">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add </li>
<li> Show </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>
My partial views are: add_order.gsp and show_orders.gsp to show a sample message for each view.
my app.js is as follows:
var sampleApp = angular.module('routeApplication', ['ngRoute']);
sampleApp.config(['$routeProvider',
function($routeProvider) {
var base = '${request.contextPath}';
$routeProvider.
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.gsp',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/AddNewOrder'
});
}]);
sampleApp.controller('AddOrderController', function($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
Note: i created a templates folder and placed my parital views on that.
This problem is that, whenever i click to load my partial views it shows
`http://localhost/angularJSrouting/templates/show_orders.gsp`
404 Not Found
Am i missing something or is there any problem of placing the partial views?
I don't think this will work. Since your templateUrl is templates/show_orders.gsp angularjs will try to find that file inside templates folder in your webapp.
You have to redirect to
http://localhost/#/angularJSrouting/templates/show_orders.gsp url
can you use '/' instead of '#' in those html line
<li> Add </li>
<li> Show </li>