I'm working on a Ionic based mobile application which does Basic Navigation through Templates
following is my Html Mark up and App.js Code
now the first controller HomeCtrl Works fine but the Second controller i.e., OtherContrl doesn't work at all.
the $scope variable throws an Exception
Classic typo mistake, in your code you have the property contrller: instead of controller:
$stateProvider
.state('page2', {
url: '/page2',
templateUrl: 'page2.html',
controller: 'OtherContrl'
}
Related
I am trying to set up an AngularJS application with a ASP.Net MVC server-side framework on a MacBook Air with Xamarin. I am moving from a Node.js runtime environment to ASP.Net and I cannot figure out how the routing is supposed to work with Angular.
I want to have a single route on the server-side and let all the other routes be controlled by Angular on the client side. However I keep getting this message:
Synchronous XMLHttpRequest on the main thread is deprecated because of
its detrimental effects to the end user's experience. For more help,
check https://xhr.spec.whatwg.org/. angular.min.js?_=1466979148289:290
WARNING: Tried to load angular more than once
I know Angular is being loaded more than once, so how would I set the Angular application as I'd like it? The relevant code is below:
Server-Side
App_Start/routeconfig.cs
using System.Web.Mvc;
using System.Web.Routing;
namespace MyApp
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "default",
url: "{*.}",
defaults: new { controller = "Home", action = "Index" }
);
}
}
}
Controllers/HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
namespace MyApp.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
Views/Home/index.cshtml
<div ng-controller="MainController" class="main-guy">
<div ui-view></div>
</div>
Client-Side
Scripts/javascripts/app.js
angular.module('app').config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider){
$urlRouterProvider
.when('', '/main')
.when('/', '/main')
.otherwise(function($injector){
$injector.get('$state').go('404', {}, { location: false });
});
$stateProvider
.state('main',{
url: '/main',
templateUrl: 'Views/Route/main',
controller: 'MainController'
})
.state('freeplay',{
url: '/freeplay',
templateUrl: 'Views/Route/freeplay',
controller: 'FreeplayController'
})
.state('404', {
url:'/404',
templateUrl: 'Views/Route/404'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Directory structure
This might not answer your question. Instead, this will be alternative approach to implement ASP.Net MVC with AngularJs.
I personally like Miguel A Castro's Mini SPA (Silos). You can watch the video here, and download the source at his website.
What it does is when a request comes in, it goes to ASP.Net MVC Route first. Then, Angular Route takes over the rest. It is a very slick design.
FYI: Angular 2 is right around the corner, so you want to use Angular 1.5 Compotent as much as possible so that you can convert to Angular 2 easily later.
For this you have to load your script to your view. After that you have to create div with ng-app, ng-controller and ng-view. You can go in detail through this link given below.
http://www.c-sharpcorner.com/UploadFile/cd7c2e/mvc-routing-with-angularjs-routing/
Found my answer: didn't complete my route filenames so it was an endless loop:
$stateProvider
.state('main',{
url: '/main',
templateUrl: 'Views/Route/main.cshtml',
controller: 'MainController'
})
.state('freeplay',{
url: '/freeplay',
templateUrl: 'Views/Route/freeplay.cshtml',
controller: 'FreeplayController'
})
.state('404', {
url:'/404',
templateUrl: 'Views/Route/404.cshtml'
});
Question Background:
I am using AngulaJS's UI Router for the first time to create two views within my app.
The Issue:
Plunker link: https://plnkr.co/edit/2XAKa6mDCUyzyOPz2CNK
I feel I'm missing something simple here but I cannot get any route to render the specified html templates set in the app.js.
Eventually I want the Update.html template to render when the submit fucntion of the home.html (search()) is clicked but first off I need to be able to actually render a single view which I currently cannot.
I would expect on-load for the route to render up the home.html page but it wont:
Any help sorting this will be much appreciated.
app.js:
angular
.module('app', [
'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'HomeController'
})
.state('update', {
url: '/update',
templateUrl: 'Update.html',
controller: 'UpdateController'
})
}])
Looking at your plunker briefly, it looks like your controller files are creating new angular apps with the same name. They were overriding each other so the .config() block didn't exist in the final app. I have updated the controller files in this plunker and it seems to be rendering the first ui view fine:
https://plnkr.co/edit/cdpWWOaBJWL3dONtIXzv?p=preview
Notice in the controller files, the angular.module('app') no longer has the second argument ['ui-bootstrap'] which was causing a new angular app to be created for each controller file. Check it out here in the angular docs.
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
Hope this helps!
My app is running without any errors, but WebStorm seems to have problems with the way I use my controllers. I declare and link them in my app.js like so:
$routeProvider
.when(...) // Omitted in sample
.when('/register/', {
templateUrl: '/app/components/register/register.html',
controller: 'RegisterController',
controllerAs: 'registerCtrl'
})
.otherwise({
redirectTo: '/home/'
});
And then call them from my templates like so:
<div class="form-group" ng-class="{'has-success': registerCtrl.firstNameValidates()}">
But hovering over registerCtrl shows the message: "Unresolved variable or type registerCtrl".
If I declare my controller using the ngController directive, all is well, but declaring them in app.js is standard AngularJS behaviour too, as far as I can tell... Could it be that WebStorm just doesn't go that far in resolving variables? Has any one gotten it to work?
I have an application that only uses an index with a controller main.js. I want the content to be defined by the URL, so I want to use $routeParams in the controller. My problem is that it turns up empty.
This is in my app.js
.config(function ($routeProvider) {
$routeProvider
.when('/:guid', {
templateUrl: '/index.html',
controller: 'MyCollectionUnitCtrl'
})
.otherwise({
redirectTo: '/'
});
});
The controller:
.controller('MyCollectionUnitCtrl',
function ($scope, $location, $routeParams) {
console.log($routeParams.guid); // Undefined
}
I've doubled checked that the module-names are the same.
The problem is that none of the code from the controller runs. I tested this by adding a console.log at the top. Index is not even a template, as I use no partials. I can't find anything about routing when only using one view, so here's where I'm stuck.
It doesn't work when I just define the controller with ng-controller neither.
Ideas? Something I'm missing? Is this a stupid question that's easily explained by documentation? I appreciate all comment, answers and feedback you can give me.
Thank you!
EDIT:
I've also tried to define ng-controller in the index.html, and then only have controller in the routingConfig, but that did not work either.
EDIT2: Plunker
Its hard to find out actual problem with your code snippet, but i think you are missing ngRoute module.
Add angular-route.js script in your html and add ngRoute dependency in your module.
I'm using AngularUI's router library and I have a strange issue: I have two distinct but similar states and controllers. What occurs is the state that I would expect runs, but then another state appears to run: it fetches the templateUrl and then the controller runs for the second state, which causes some weird behavior.
The states in question:
angular.module('app', ['ui.route'])
.config(function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('list', {
url: "/",
templateUrl: STATIC_URL + "js/eleagemot/views/list.html",
controller: 'questionListCtrl',
})
.state('detail', {
url: '/{username:[a-zA-Z0-9\\-]+}/{slug:[a-z0-9\\-]+}/',
templateUrl: STATIC_URL + "js/eleagemot/views/detailed_question.html",
controller: 'questionDetailCtrl'
})
.state('newQuestion', {
url: '/new-question/',
templateUrl: STATIC_URL + "js/eleagemot/views/edit_question.html",
controller: 'editQuestion'
})
.state('questionEdit', {
url: '/{username:[a-zA-Z0-9\\-]+}/{slug:[a-z0-9\\-]+}/edit/',
templateUrl: STATIC_URL + "js/eleagemot/views/edit_question.html",
controller: 'editQuestion'
})
.state('answerEdit', {
url: '/answer/{id:[0-9]+}/edit/',
templateUrl: STATIC_URL + "js/eleagemot/views/edit_answer.html",
controller: "editAnswer"
})
});
Exactly what happens is if I go to /answer/1/edit/ it first loads the edit_answer.html template and runs the editAnswer controller, as it should. But then it also loads the edit_question.html template and runs the editQuestion controller. I know because there's some Restangular code that runs correctly in the editAnswer controller and then some similar Restangular code that runs in the editQuestion controller, but that causes a 404 and then the router redirects to the root. Also putting some console logs at the top of each controller shows that the editAnswer controller runs and then the editQuestion controller.
This behavior is only seen when loading the url for the answerEdit state, and not for any of the other states. Why is this happening and how can I fix it?
Looks like you've got some regular expressions that match too easily. Note that /answer/{id:[0-9]+}/edit/ always matches the above url pattern: '{username:[a-zA-Z0-9\\-]+}/{slug:[a-z0-9\\-]+}/edit/