I trying to use ui.routing but using stateProvider I get error : Could not resolve 'newUser' from state 'login'.
Here is my config:
index.html
<html lang="en" ng-app="mainApp">
<section id="mainBody">
<div class="continer">
<div>
<a ui-sref="main">Header</a>
<a ui-sref="login">Login</a>
<a ui-sref="list2">List2</a>
</div>
<div class="row" ui-view></div>
<div>Footer</div>
</div>
</section>
</html>
index.js
var mainApp = angular.module('mainApp', [, 'ui.router', 'ui.bootstrap']);
mainApp.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('login', {
url: 'login',
templateUrl: '../../pages/login.html'
});
}]);
login.html
<!DOCTYPE html>
<html lang="en" ng-app="loginApp">
<body>
<section id="form">
<!--form-->
<div class="container login-user">
<div class="row">
<a type="button" class="btn btn-loginUser btn-default col-xs-12 col-sm-2" ui-sref="existingUser">Existing user</a>
<a type="button" class="btn btn-loginUser btn-default col-xs-12 col-sm-2" ui-sref="newUser">New user</a>
</div>
<div class="row" ui-view="userInfo">
</div>
</div>
</section>
</body>
</html>
login.js
var loginApp = angular.module('loginApp', ['ui.router', 'ngSanitize', 'ui.bootstrap']);
loginApp.config(['stateProvider', function (stateProvider) {
$stateProvider
.state('existingUser', {
views: {
"userInfo": {
url: 'existinguser',
templateUrl: '../../pages/loginForms/existingUserForm.html',
controller: 'existingUserCtrlr'
}
}
})
.state('newUser', {
views: {
"userInfo": {
url: 'newUser',
templateUrl: '../../pages/loginForms/newUserForm.html',
controller: 'newUserCtrlr'
}
}
});
}]);
Maybe someone can tell me what I missed?
loginApp and mainApp are two different modules. You cant go to newUser from login because login is defined on mainApp. While other two routes are defined on loginApp. Define all routes on same module.
Related
I am very new in angular JS and ng-view is not working.
Below is code of AngularFormsApp.js
var angularFormsApp = angular.module('angularFormsApp', ["ngRoute"]);
angularFormsApp.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "app/Home.html",
controller: "HomeController"
})
.when("/newEOIForm", {
templateUrl: "app/EOIForm/eoifTemplate.html",
controller: "eoifController"
})
.otherwise({
redirectTo: "/Home"
});
});
angularFormsApp.controller("HomeController",
function ($scope, $location) {
$scope.addNewEOI = function () {
$location.path('/newEOIForm');
};
});
Below is html code.
<!DOCTYPE html>
<html ng-app="angularFormsApp">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="app/AngularFormsApp.js"></script>
<script src="app/EOIForm/eoifController.js"></script>
<script src="app/EOIForm/eoifDirective.js"></script>
<script src="app/EOIForm/eoifService.js"></script>
</head>
<body ng-controller="eoifController" class="container">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="nav">
Home
About
Detail
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view=""></div>
</div>
</body>
</html>
Below is my root structure.
Why ng-view is not working, also I am not able to debug the code.
Be careful with that $routeProvider.otherwise({redirectTo: '/Home'}).
It should be:
$routeProvider.otherwise({redirectTo: '/home'})
Please, link the href in your index.html like this:
Home
About
Detail
And in your config:
angularFormsApp.config(function ($routeProvider) {
$locationProvider.hashPrefix('');
// Rest of the code
I'm doing a tutorial from https://thinkster.io/tutorials/mean-stack called flapper news. I have completed the tutorial and the system work fine. But, I was thinking doing an inline template in a single file is not a good practice specially if you're doing a big project. So I tried to separate those templates into files(.html). Unfortunately the html file cannot be displayed in the ui-view. There was no error in the console nor the server. I tried to change my index.ejs file in the view folder into the public folder and rename it to index.html. Still not working.
Here is my index.html:
<html>
<head>
<title>Flapper News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="/javascripts/angularapp.js"></script>
<style>
.glyphicon-thumbs-up {
cursor: pointer
}
</style>
</head>
<body ng-app="flapperNews">
<nav class="navbar navbar-default pull-right" ng-controller="NavCtrl">
<ul class="nav navbar-nav">
<li ng-show="isLoggedIn()"><a>{{ currentUser() }}</a></li>
<li ng-show="isLoggedIn()">Log Out</li>
<li ng-hide="isLoggedIn()">Log In</li>
<li ng-hide="isLoggedIn()">Register</li>
</ul>
</nav>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
</body>
</html>
Here is one of the html file in the same public folder(home.html):
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in posts | orderBy: '-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></span> {{post.upvotes}}
<span ng-show="post.author"> posted by <a>{{post.author}}</a> |
</span>
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
<span>
Comments
</span>
</div>
<form ng-submit="addPost()" ng-show="isLoggedIn()" style="margin-top:30px;">
<div ng-hide="isLoggedIn()">
<h3>You need to Log In or Register before you can add a post.</h3>
</div>
<h3>Add a new post</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title" ng-model="title"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Link" ng-model="link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
public/javascripts/angularApp.js:
var app = angular.module('flapperNews', ['ui.router']);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'MainCtrl',
resolve: {
postPromise: [
'posts',
function(posts) {
return posts.getAll();
}
]
}
})
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl',
resolve: {
post: [
'$stateParams',
'posts',
function($stateParams, posts) {
return posts.get($stateParams.id);
}
]
}
})
.state('login', {
url: '/login',
templateUrl: '/login.html',
controller: 'AuthCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('home');
}
}]
})
.state('register', {
url: '/register',
templateUrl: '/register.html',
controller: 'AuthCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('home');
}
}]
});
$urlRouterProvider.otherwise('/');
}
]);
fyi, the ".state('home', { url:" was ".state('home', { url: '/home'" but it show an error so I change it to "url: '/'" and the error was gone. But still the ui-view cannot display the templates.
This is the output:
enter image description here
Anyone has any idea on how to solve this? Does bower has anything to do with this?
You don't need the script tag once you have the template on the separate file. Remove it and it should works. You can just use the path of the file for the templateURL then
Sometimes you will something like this just like you have,
<script type="text/ng-template" id="template.html">
... some template stuff
</script>
That script tag was actually for having the template on the same file as the main template file, and you can use templateUrl with the value of the id attribute just like usual. It will treat the body of the script tag as a file of template.html since the value of the id is template.html
I need help with routing in AngularJS. I am new and don't understend why it doesn't work.
I have a small application with to pages.
my app.js:
var app = angular.module("suggestionBox", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.when('/suggestion/:id', {
controller: 'SuggestionController',
templateUrl: 'views/suggestion.html'
})
.otherwise({
redirectTo: '/'
});
});
my view:
<form ng-submit="addSuggestion()" style="margin-top: 50px">
<h3> Submit Your Suggestion </h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Great ideas here" ng-model="data.title">
</div>
<button type="submit" class="btn btn-primary">Suggest</button>
</form>
<div class="posts-wraper">
<div class="suggestion" ng-repeat="post in posts | orderBy: '-upvotes'">
<h3>{{ post.title }}</h3>
<div>
<p>
<span class="glyphicon glyphicon-plus-sign" ng-click="upVote(post)"></span> Upvotes: {{post.upvotes}}
</p>
<a class="comment" href="#/suggestion/{{$index}}">Comments</a>
</div>
</div>
</div>
main page:
<!DOCTYPE html>
<html>
<head>
<title>Suggestion Box</title>
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="suggestionBox">
<div class="col-md-2"></div>
<div class="col-md-8">
<div ng-view></div>
</div>
<div class="col-md-2"></div>
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/HomeController.js"></script>
<script type="text/javascript" src="js/controllers/SuggestionController.js"></script>
<!-- Services -->
<script src="js/services/suggestions.js"></script>
</body>
</html>
And when I'm on home page and want to go to /suggestion/:id I click reference and nothing happen. But I have the following url: "http:// localhost:8080/#!/#suggestion%2F0" and stay at the home page. If I type url by hand like this: "http:// localhost:8080/#!/suggestion/0" all is well and I go to suggestion page. Then I press back:
Back
and it works! I am on home page, but url is: "http:// localhost:8080/#!/#%2F"
I don't know why! Please help me with it.
How about something like that check the Plunker if code snippet doesn't make any sense also pay attention to markup changes in the index, home and suggestion.html in plunker. You can edit the plunker and see the URL changes by launching the plunker preview in separate window.
app.js
var app = angular.module("SuggestionBox", ['ngRoute']);
app.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider){
$locationProvider.hashPrefix(''); // magic line
$routeProvider
.when('/',{
controller: "HomeController",
templateUrl: "views/home.html"
})
.when('/suggestion/:id',{
controller: "SuggestionController",
templateUrl: "views/suggestion.html"
})
.otherwise({
redirectTo: '/'
});
}]);
I'm new to AngularJS and I'm trying to make a slider work that I copied from an example online.
At the moment, I have the slider coming up on the page I want it to (gallery.html) and the automatic picture change works, but, when I try to press the next/previous button, it just takes me to a random page with nothing on it.
I think the problem is with my hrefs on the arrows but I honestly don't know where to go from here. Also, is my slider directive in the right place (at the top of gallery.html) ?
File structure:
Photography
- bower_components
- css
----- stylemain.css
- img
----- phones
---------- ...a bunch of png files...
- js
----- app.js
----- controller.js
- partials
----- gallery.html
- phones
----- ...a bunch of json files...
- index.html
This is my index.html:
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<!--<link rel="stylesheet" href="css/app.css">-->
<link rel="stylesheet" href="css/stylemain.css">
<!-- JS & ANGULAR FILES -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-touch.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<!--<script src="js/directives.js"></script>-->
</head>
<body>
<div class="template-header">
<div class="template-container">
<div class="template-logo">
<h1><a href="#/">title</h1>
</div>
<div class="template-nav">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Music</li>
<li>Other-work</li>
</ul>
</div>
</div>
</div>
<!-- BODY CONTENT -->
<div class="dynamic-body" ng-view></div>
</body>
This is my app.js:
'use strict';
/* App Module */
var mainApp = angular.module('mainApp', [
'ngRoute',
'galleryControllers'
]);
mainApp.config(['$routeProvider',
function($routeProvider){
$routeProvider
.when('/', {
templateUrl:'partials/main.html',
})
.when('/gallery', {
templateUrl:'partials/gallery.html',
controller: 'mainImageCtrl',
})
.when('/:phoneId', {
templateUrl: 'partials/gallery-image.html',
controller: 'singleImageCtrl'
})
.when('/music', {
templateUrl: 'partials/music.html',
controller: 'singleImageCtrl'
})
.when('/other-work', {
templateUrl: 'partials/other-work.html',
controller: 'singleImageCtrl'
});
}
]);
This is my controller.js:
'use strict';
/* Controllers */
var galleryControllers = angular.module('galleryControllers', [
'ngAnimate'
]);
galleryControllers.controller('mainImageCtrl',['$scope', '$http',
function($scope, $http){
$http.get('phones/phones.json').success(function(data){
$scope.images = data;
});
}]);
galleryControllers.directive('slider', function($timeout) {
return {
restrict: 'AE',
replace: true,
scope: {
images: '='
},
link: function(scope, elem, attrs) {
scope.currentIndex=0;
scope.next=function(){
scope.currentIndex<scope.images.length-1?scope.currentIndex++:scope.currentIndex=0;
};
scope.prev=function(){
scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.images.length-1;
};
scope.$watch('currentIndex',function(){
scope.images.forEach(function(image){
image.visible=false;
});
scope.images[scope.currentIndex].visible=true;
});
/* Start: For Automatic slideshow*/
var timer;
var sliderFunc=function(){
timer=$timeout(function(){
scope.next();
timer=$timeout(sliderFunc,2000);
},2000);
};
sliderFunc();
scope.$on('$destroy',function(){
$timeout.cancel(timer);
});
/* End : For Automatic slideshow*/
}
};
});
// galleryControllers.controller('singleImageCtrl',['$routeParams','$scope',
// function($scope, $routeParams){
// $scope.phoneId = $routeParams.phoneId;
// }]);
This is my gallery.html:
<slider images="images"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query"/>
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<!--Body content-->
<!-- <ul class="phones">
<li ng-repeat="phone in phoneImages | filter:query | orderBy:orderProp" class="thumbnail">
<img ng-src="{{phone.imageUrl}}">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul> -->
<div class="slider">
<div class="slide" ng-repeat="image in images" ng-show="image.visible">
<img ng-src="{{image.imageUrl}}" />
</div>
<div class="arrows">
<a href="#" ng-click="prev()">
<img src="img/left-arrow.png" />
</a>
<a href="#" ng-click="next()">
<img src="img/right-arrow.png" />
</a>
</div>
</div>
</div>
</div>
phones.json is just a json file with fields on different phones etc.
Thanks in advance, all help is much appreciated!!!!
test with https://github.com/angular-ui/ui-router
and every time you try to call a route used =
<a ui-sref="root">link</a>
appModule.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/signin');
$stateProvider
.state("root", {
url: "/signin",
templateUrl: "views/signin.html",
controller: 'AuthController'
})
with ui-sref="root" already know to what route to go.
I'm trying to implement a modal from angular ui bootstrap. After I implemented it on my web application, I got an unexpected behavior which is the modal does show up after I clicked the text, but what shows up is not the path that I wanted but rather the navbar of the web app.
Here's the code
index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title></title>
<base href='/'>
<!-- load bootstrap from CDN and custom CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script src="app.js"></script>
<script type="text/javascript" src="controller.js"></script>
</head>
<body>
<header>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<span class="glyphicon glyphicon-book"></span>Testing App
</div>
<ul class="nav navbar-nav navbar-right" ng-controller="ModalController">
<li>Write</li>
</ul>
</div>
</div>
</header>
<div ng-view></div>
</body>
</html>
app.js
angular.module('MyApp', ['ngRoute', 'ui.bootstrap'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
});
$locationProvider.html5Mode(true);
});
controller.js
angular.module('MyApp')
.controller('HomeController', function($scope, $location) {
$scope.data = "Hello Angular";
})
.controller('ModalController', function($scope, $location, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: function() {
},
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
home.html
<div class="container">
<h1>Awesome {{ data }}</h1>
</div>
modal.html (The path that the modal suppose to show);
<h1>Need to show this actually</h1>
The picture, what shows up after i clicked the text that trigger the modal event
Added this:
<script type="text/ng-template" id="modal.html">
<h1>Need to show this actually</h1>
</script>
right after
<ul class="nav navbar-nav navbar-right" ng-controller="ModalController">
and it works in plunker:
http://plnkr.co/edit/bPuemujbTiX7U8AnY607?p=preview