I have configured some basic state pretty much as it should but it seems the template is not injecting in <div ui-view></div>.
Here's my code.
https://plnkr.co/edit/LaMMc8JpCuq09Dav7CFW
EDIT:
My Index.html
<!DOCTYPE html>
<html ng-app="crudMasters">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script data-require="ui-router#*" data-semver="1.0.0-beta.2" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-beta.2/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<div ui-view></div>
</body>
</html>
script.js
var app = angular.module('crudMasters', ['ui.router']);
app.config(function($stateProvider, $urlRouteProvider){
$urlRouteProvider.otherwise('/');
$stateProvider
.state('root',{
url: '/',
templateUrl: "home.htm"
})
.state('root.master1', {
url: '/master1',
templateUrl: "master1.htm",
controller: 'master1Ctrl',
controllerAs: '$ctrl'
})
.state('root.master2', {
url: '/master2',
templateUrl: "master2.htm",
controller: 'master2Ctrl',
controllerAs: '$ctrl'
})
})
app.controller('mainCtrl', mainCtrl);
function mainCtrl(){
let ctrl = this;
}
You have many issues with your code,
(i) It's not urlRouteProvider it is $urlRouterProvider
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/");
$stateProvider
.state('root', {
url: '/',
templateUrl: "home.html",
controller: 'HomeCtrl'
})
.state('root.master1', {
url: '/master1',
templateUrl: "master1.html",
controller: 'master1Ctrl'
})
.state('root.master2', {
url: '/master2',
templateUrl: "master2.html",
controller: 'master2Ctrl'
})
})
DEMO
1) The main issue of your code is your first route,
.state('root',{
url: '/',
templateUrl: "home.htm"
})
Should be,
.state('root',{
url: '',
templateUrl: "home.htm"
})
This should has the url as '' if you are not on '/' url.
2) Also, as #Sajeetharan mentioned, $urlRouteProvider, should be $urlRouterProvider.
check this plunker now, with the same code as yours and with these two changes
Working DEMO with your code
So, make those two changes and your plunker is good to go.
Related
I have the following code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/styles/bootstrap.min.css" rel="stylesheet" />
<link href="~/styles/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>
</head>
<body ng-app="appName">
view1
view2
<div>
this is a dynamic message: {{message}}
</div>
<div ng-view>
</div>
<script type="text/javascript">
var app = angular.module('appName', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
})
.when('/view1', {
templateUrl: 'pages/about.html',
controller: 'FirstController'
})
.when('/view2', {
templateUrl: 'pages/contact.html',
controller: 'SecondController'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('FirstController', function ($scope) {
$scope.message = 'first controller';
});
app.controller('SecondController', function ($scope) {
$scope.message = 'Second controller';
});
app.controller('HomeController', function ($scope) {
$scope.message = 'Home controller';
});
</script>
</body>
</html>
but when i click on the view1 or view2 anchor tag, nothing is happening and i get an error like this
resource not found error
I dont get any error in the console, can anyone help me to figure out what exactly is wrong.
In your html you miss
ngview directive add it.
<div ng-view></div>
For further help see this link
http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
Use ng-view to display content and you missed # at anchor tag
<body ng-app="appName">
view1
view2
<div ng-view>
this is a dynamic message: {{message}}
</div>
<script>
<!-- script here -->
</script>
</body>
You don't have ng-view
add following in html to get the pages loaded
<div ng-view></div>
Try this for app config
app.config(function (locationProvider, $routeProvider) {
$locationProvider.hashPrefix('#');
$routeProvider.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
})
.when('/view1', {
templateUrl: 'pages/about.html',
controller: 'FirstController'
})
.when('/view2', {
templateUrl: 'pages/contact.html',
controller: 'SecondController'
})
.otherwise({
redirectTo: '/'
});
});
This is my app.js
angular.module('data',['ui.router']).config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/app/views/showusers.html',
controller: 'Crud'
})
.state('about', {
url: '/about',
templateUrl: '/app/views/addusers.html',
})
});
CrudController.js
angular.module('values', []).controller('Crud', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
function edituser(id)
{
console.log(id);
}
});
This is index file
<!DOCTYPE html>
<head>
<title>
MEAN Stack App
</title>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body ng-app="data">
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/app/controller/CrudController.js"></script>
<script src="/app/app.js"></script>
<div class="container">
<h1>MEAN Application</h1>
<h1>xsx{{firstName}}</h1>
<div ui-view>
</div>
</div>
</body>
</html>
when I define controller in app.js in site provider, it returns controller is not a function got undefind.
I am using angularjs1.5.8 version.Please help me out from this problem. I am new to this tech.. Thanks
You need to link both the App.js and Controller. In your service:
angular.module('values', ['controllerinject']) // => here you injected your controller
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/app/views/showusers.html',
controller: 'Crud'
})
$urlRouterProvider.otherwise('/home');
})
And in your controller add same angular.module('controllerinject', [])
Im trying to use the Ionic Framework to create an app but i have problems to get a simple example to work. This is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- pouchdb -->
<script src="lib/pouchdb/pouchdb.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/modules/home.js"></script>
<script src="js/controller/home.js"></script>
</head>
<body ng-app="App">
<ion-nav-view></ion-nav-view>
</body>
</html>
My app.js
angular.module("App", ["ionic", "App.Home"])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app", {
url: "/app",
abstract: true,
templateUrl: "templates/home.html",
});
$urlRouterProvider.otherwise("/app/home");
})
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
My module home:
angular.module("App.Home", [])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app.home", {
url: "/home",
views: {
"main": {
templateUrl: "templates/home.html",
controller: "HomeController"
}
}
});
});
As you can see here i want the home.html to use the HomeController So here is the HomeController
angular.module("App.Home")
.controller("HomeController", function() {
console.log("controller");
});
But the home controller actually never is called. The logoutput never appears. My home.html is showing:
<ion-view view-title="Home">
<ion-content>
Home
</ion-content>
</ion-view>
I mapped the controller to the template so why isnt the controller method getting called?
EDIT
if i change my home.html to the following:
<ion-view view-title="Home">
<ion-content ng-controller="HomeController">
Home
</ion-content>
</ion-view>
It works. So setting ng-controller="HomeController" works fine but
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app.home", {
url: "/home",
templateUrl: "templates/home.html",
controller: "HomeController"
});
});
or
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app.home", {
url: "/home",
views: {
"main": {
templateUrl: "templates/home.html",
controller: "HomeController"
}
}
});
Does not work. For me that makes no sense. I want to use the stateProvider to set the controller.
EDIT 2
created a plunker
Fixed!
The controller gets instantiated when it gets bound to the view.
I set the templateUrl of my abstract state to be templates\home.html
That is wrong. I just had to do:
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app", {
url: "/app",
abstract: true,
templateUrl: "",
});
$urlRouterProvider.otherwise("/app/home");
})
and to use:
angular.module("App.Home", [])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app.home", {
url: "/home",
templateUrl: "templates/home.html",
controller: "HomeController"
});
});
So without to define views.
I got an example from here : http://scotch.io/tutorials/javascript/angular-routing-using-ui-router and I see an example about using route-ui as below:
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// nested list with custom controller
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
// nested list with just some random string data
.state('home.paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
my question is : how can I use controller in other file and then call the name of that controller into .state's option ?
Here is my controller that I want to use in other file :
(function () {
'use strict';
angular.module("myCtrl", [])
.controller('myCtrl', function ($scope) {
$scope.dogs = ['name 1', 'name 2', 'name 3', 'name 4'];
})
})();
and here is my rout-ui :
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/partial-home.html',
controller: 'myCtrl'
})
.state('about', {
url: '/about',
templateUrl: 'about/partial-about.html'
});
});
and below is my html page :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>testRoute</title>
<!-- testRoute references -->
<link href="css/index.css" rel="stylesheet" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body ng-app="routerApp">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
<div ui-view></div>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/app.js"></script>
<!--<script src="scripts/myController.js"></script>-->
</body>
</html>
Have you tried just doing controller: 'Name_of_your_Controller'?
I've created a index.html page where I am defining 2 links as:
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>My Angular App!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="js/app.js"></script>
</head>
<body>
<div id="links">
<a ui-sref="login">Login</a>
<a ui-sref="register">Register</a>
</div>
<div ui-view></div>
</body>
</html>
I my app.js file, I am defining the route as:
angular.module('test', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('register', {
url: '/register',
templateUrl: '/partials/register.html',
controller: 'registration'
});
$stateProvider.state('login',{
url: '/login',
templateUrl: '/partials/login.html',
controller: 'login'
});
$urlRouterProvider.otherwise('/');
}])
When I click on the links, defined in index.html file, it is not showing the another page as defined in app.js
You need not inject the dependencies in the config folder.
You can do it like this:
angular.module('test', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('register', {
url: '/register',
templateUrl: '/partials/register.html',
controller: 'registration'
});
$stateProvider.state('login',{
url: '/login',
templateUrl: '/partials/login.html',
controller: 'login'
});
$urlRouterProvider.otherwise('/');
});