Hey I'm trying to replace ngroute with ui-router in my website but when I migrated the view is not inserted. Here's the app.js snippet:
var myApp = angular.module('myApp', ['ngRoute', 'ngDialog', 'ui-router']);
myApp.config(['$stateProvider','$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
//testing to see if this works
$stateProvider
.state('browse', {
url: '/',
templateUrl: '/browse',
controller: 'browseController'
});
}]);
The browse file is an ejs file, and I've tried calling it directly using the file path (views/browse.ejs) but that doesn't work. /browse accesses templates through the browser.
Related
I treid to make a contoller for each of my page but have a broblem. Mistakes in console, and the elements of controller don`t work on html page.
I use $stateProvider cod below is the cod of config, it`s work normal.
var app = angular.module("appmyApp", ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
// For any unmatched url, redirect to root
$urlRouterProvider.otherwise("/");
$stateProvider
.state('header', {
abstract: true,
templateUrl: '/app/pages/header.html'
})
.state('home', {
url: '/',
templateUrl: 'app/pages/home.html',
controller: 'HomeController'
})
}]);
When I add in the config the row - controller: 'HomeController'. I have a mistake in console.
angularjs.js:127 Error: [$controller:ctrlreg]
http://errors.angularjs.org/1.7.5/$controller/ctrlreg?p0=HomeController
at angularjs.js:7
at angularjs.js:97
at Object.<anonymous> (viewDirective.ts:410)
at angularjs.js:17
at Ba (angularjs.js:89)
at q (angularjs.js:73)
at g (angularjs.js:64)
at angularjs.js:64
at angularjs.js:69
at n (viewDirective.ts:328) "<div ui-view="" class="ng-scope">"
When I delete it, it is not any mostakes in console.
.state('home', {
url: '/',
templateUrl: 'app/pages/home.html'
})
In both case page opens good. Route is work. But controller is not work.
The cod of controller
var app = angular.module("appTradeRoom", []);
app.controller("HomeController", function ($scope) {
$scope.name = "Hello";
});
But on the view I have this.
http://prntscr.com/lzeyy5
Scripts home-controller.js I added in the head of home.html
<script src="/app/pages/home-controller.js"></script>
I added ng-controller="HomeController" to body in html page home.html but it does not work. What a problem. I Use last angularJS
Here is the reference on index.html
http://prntscr.com/lzf0cd
Change:
var app = angular.module("appTradeRoom", []);
app.controller("HomeController", function ($scope) {
To
var app = angular.module("appTradeRoom");
// ^^ no dependencies
app.controller("HomeController", function ($scope) {
When there are no dependencies angular.module() will act as a getter of existing module, otherwise it will create a new one
We are continuing the development of our website that uses AngularJS on the frontend, and Yii 1.1 on the backend.
Our application allows users to create their own community groups
When a user clicks on a group called "ABC Group" (who's ID is 9), the url is
http://ourwebsite.com/#/app/group/9/content/list
We want to change this however to look like:
http://ourwebsite.com/abcgroup/
we are using ui-router
Any ideas how to do this?
Also, why does angular use the "#" at all?
You have to inject $locationProvider and set the property html5Mode true as follow:-
$locationProvider.html5Mode(true);
Eg:-
angular.module('myModule', [])
.config(['$routeProvider', '$locationProvider', function($routeProvider,
$locationProvider) {
$routeProvider.
when('/contact', {templateUrl: 'xyz/contact.html', controller: mycontroller})
.otherwise({redirectTo: '/home.html'});
$locationProvider.html5Mode(true);
}]);
Even you can check the answer here
if you are using ui-router you can do the same with $stateProvider
angular.module('myModule', [])
.config(['$stateProvider', '$locationProvider', function($stateProvider,
$locationProvider) {
$stateProvider
.state("contact",
{
url: "xyz/contact",
views: {
'content': {
templateUrl: "Views/xyz/contact.html",
controller: "contactController"
}
}
})
$locationProvider.html5Mode(true);
]);
I'd like to know if I can put a stateprovider somewhere else than my app.js, because it causes me some problems in other pages.
app.js
var app = angular.module('myApp', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('form', {
url: '/form',
templateUrl: 'templates/step_Form/form.html?v=' + new Date().getDay()
})
// url will be nested (/form/profile)
.state('form.upload', {
url: '/upload',
templateUrl: 'templates/step_Form/form-upload.html?v=' + new Date().getDay()
})
// url will be /form/interests
.state('form.content', {
url: '/content',
templateUrl: 'templates/step_Form/form-content.html?v=' + new Date().getDay()
})
$urlRouterProvider.otherwise('/form/upload');
})
My controller
angular.module('myApp').controller('ImportGeneralCtrl', function ($scope, $stateProvider, $urlRouterProvider) {
//myfunctions
}
I integrated a multi-step form in my HTML, using the state provider.
How could i get out the state provider from app.js to only apply it on my controller?
You cant use $stateProvider or $urlRouterProvider (providers) in a controller because those providers are just made for configuration injection. It can be uses in any angular.module('myApp').config() you want but you can't user providers in a controller. In controllers you could only inject $state (modules, services, factories, e.g.):
angular.module('myApp').controller('myController', function ($scope, $state) {}
This little code snippet shows you how to create a Service, a Factory and a Provider.
I want to get parameter from url in angularjs. for that i have did following.
1. in my app.js
var app = angular.module("testApp",
["ngRoute"]);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/subscribe/:statusResponse', {
templateUrl: "client/subscription/statusResponse.html",
controller: "testController"
})
.otherwise({
redirectTo: "/"
});
// use the HTML5 History API
// $locationProvider.html5Mode(true);
}]);
2 in controller file:
app.controller("testController",['$routeParams',function($routeParams){
console.log($routeParams.statusResponse);}]);
in html file right now i have added simple text with define testApp.
The problem is that
when i hit url in browser
app.dev/demoapp/#/subscribe/test
it automatically grab
app.dev/demoapp/#/subscribe/:statusResponse
so what should be the problem i am not able to find that?
With Yeoman I created an angular-fullstack project using the ui-route. And now I would like to know how the change the main view to login.html. So normally when you start the application you first get the main view where you can chose to login or register. What I want is when the application start the page starts direct on the login.html
Via this post -> How to change/set the main view using Yeoman with Angular Fullstack , I tried the following:
.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$urlRouterProvider
.otherwise('/');
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('authInterceptor');
$stateProvider
.run(function ($state) {
$state.go('login');
});
})
But when I implement this code then the main view page just goes blank and when I surf to http://localhost:900/login then I get a 304
You can make login the default route:
$urlRouterProvider
.otherwise('/login');
For those who might come across the same issue as me. I found the solution. So basically I just go to the main.js and change the code to
'use strict';
angular.module('zazzleToolPlannerApp')
.config(function ($stateProvider) {
$stateProvider
.state('main', {
url: '/login',
templateUrl: 'app/account/login.html',
controller: 'MainCtrl'
});
});
And in the app.js of the folder app you just change the following code
.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$urlRouterProvider
.otherwise('/');
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('authInterceptor');
})
TO:
.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$urlRouterProvider
.otherwise('/login');
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('authInterceptor');
})