I feel like I'm so close, but I get hung up on why this setup isn't working for me. https://github.com/jaruesink/first_meteor
Thanks for anyone who can help out with this, I'm just trying to learn and have fun with a new project.
scripts/_main.coffee
#App = angular.module('App', [
'angular-meteor'
'ngMaterial'
'ui.router'
])
#App.config [
'$interpolateProvider'
($interpolateProvider) ->
$interpolateProvider
.startSymbol '[['
.endSymbol ']]'
]
scripts/router.coffee
#App.config [
'$stateProvider', '$urlRouterProvider', '$locationProvider'
($stateProvider, $urlRouterProvider, $locationProvider) ->
$locationProvider.html5Mode true
$urlRouterProvider.otherwise '/home'
$stateProvider.state('home'
url: '/home'
templateUrl: UiRouter.template 'home'
)
]
index.jade
head
title App
base(href="/")
body(ng-app="App")
div.container
h1 If 2 + 5 = [[2+5]], then I'm working :-)
p but why isn't the router below showing up?
div(ui-view)
views/home/home.jade
template(name='home')
section#home
div.container
h1 hello world, 1 + 2 = [[1+2]]
but here is what happens (the highlighted ui-view repeats the header code with all of the scripts again too)
In your file router.coffee, On the templateUrl attribute you just need to mention the name of template like below:
#App.config [
'$stateProvider', '$urlRouterProvider', '$locationProvider'
($stateProvider, $urlRouterProvider, $locationProvider) ->
$locationProvider.html5Mode true
$urlRouterProvider.otherwise '/home'
$stateProvider.state('home'
url: '/home'
templateUrl: 'home'
)
]
Your application will work fine
Related
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);
]);
Basically I want to create routes for my angular app from a CMS without a deployment. So I am trying to do something similar to this tutorial: http://gonzalo123.com/2014/06/30/setting-up-states-from-a-json-file-in-angularjs-applications/. Essentially I have json document that has a list of available routes, and I want to be able to access those routes by name. This is what I have:
newco.js:
#newco = angular.module 'newco', [
'ui.bootstrap',
'ngResource',
'ngRoute',
'ngIdle',
'LocalStorageModule',
'checklist-model',
# 'zj.namedRoutes',
'ng.deviceDetector',
'noCAPTCHA',
'feature-flags',
'ui.router',
'Routing'
]
#newco.config(['$provide', '$locationProvider','$httpProvider', '$stateProvider', '$urlRouterProvider', 'routerProvider', ($provide, $locationProvider, $httpProvider, $stateProvider, $urlRouterProvider, routerProvider) ->
$httpProvider.interceptors.push('localeInterceptor');
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
$urlRouterProvider.otherwise '/'
routerProvider.setCollectionUrl
return
$stateProvider.state '/',
url: '/'
templateUrl: '/pages/home/index-v3'
$urlRouterProvider.otherwise '/home'
routerProvider.setCollectionUrl
return
]).controller 'NewHomeController', ($scope, router) ->
$scope.reload = ->
router.setUpRoutes()
return
return
routing.js.coffee:
angular.module('Routing', [ 'ui.router' ]).provider('router', ($stateProvider) ->
urlCollection = undefined
#$get = ($http, $state, CMSS3Url) ->
{ setUpRoutes: ->
$http.get(CMSS3Url + '/routes.json').success (collection) ->
_.each collection.routes, (route) ->
$stateProvider.state route,
url: route
templateUrl: '/pages/home/new_index'
controller: 'NewHomeController'
return
return
}
#setCollectionUrl = (url) ->
urlCollection = url
return
return
).run (router) ->
router.setUpRoutes()
return
collection:
{
"routes": [
"/route1",
"/route2",
"/"
]
}
Because I converted from plain js to coffee I am thinking it could be a minification issue but I honestly don't know. Any help is greatly appreciated.
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');
})
I'm using the ngClip plugin to attempt to add a "copy to clipboard" option to my web app. I am also using the ui-router in my module config. The problem is that when I add the ngClipProvider dependency to my .config, the $urlRouterProvider becomes undefined. When I remove it, $urlRouterProvider is an object again. Below is my code:
var app = angular.module('app',['ui.router', 'ui.date', 'ngAnimate', 'angular-loading-bar', 'orders-directives', 'orders-controllers', 'orders-services', 'orders-factories', 'ngClipboard']);
//Config
app.config(['ngClipProvider', function($stateProvider, $urlRouterProvider, ngClipProvider){
$urlRouterProvider.otherwise('/');
$stateProvider.state('/', {
url: '/',
templateUrl: 'templates/admin-view.html',
controller: 'ordersController as ordersCtrl'
}).state('order', {
url: '/order/:ordernum?id',
templateUrl: 'templates/order-details.html',
controller: 'orderDetailsController as orderCtrl'
}).state('export', {
url: '/export',
templateUrl: 'templates/review-export.html',
controller: 'reviewExportController as reviewExportCtrl'
});
//ngClipProvider.setPath("../plugins/ZeroClipboard/ZeroClipboard.swf");
}]);
If I remove the "['ngClipProvider .....]" section and the "ngClipProvider" from the function parameters, everything works. As is above, $urlRouterProvider is null.
You are messing with inline dependency injection array , missed to add '$stateProvider', '$urlRouterProvider' before 'ngClipProvider'
app.config(['$stateProvider', '$urlRouterProvider', 'ngClipProvider',
function($stateProvider, $urlRouterProvider, ngClipProvider){
//code here...
}])
There is the following code:
angular.module('app', ['app.animators', 'app.events', 'app.hotel', 'app.controllers', 'app.services', 'ui.router', 'templates', 'ngResource', 'ngCookies', 'ui.bootstrap', 'ngImgCrop', 'angularjs-dropdown-multiselect']).config(['$httpProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider', ($httpProvider, $locationProvider, $stateProvider, $urlRouterProvider) ->
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
$urlRouterProvider.otherwise("/404")
$stateProvider.state('signIn'
url: '/admin/signin'
controller: 'SignInController'
templateUrl: 'signin.html'
)
$locationProvider.html5Mode(true)
])
It works good, but I change it to the following code:
angular.module('app', ['app.animators', 'app.events', 'app.hotel', 'app.controllers', 'app.services', 'ui.router', 'templates', 'ngResource', 'ngCookies', 'ui.bootstrap', 'ngImgCrop', 'angularjs-dropdown-multiselect']).config(['$httpProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider', ($httpProvider, $locationProvider, $stateProvider, $urlRouterProvider) ->
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
$urlRouterProvider.otherwise("/404")
$stateProvider.state('admin.signIn'
url: '/admin/signin'
controller: 'SignInController'
templateUrl: 'signin.html'
).state('admin'
abstract: true
)
$locationProvider.html5Mode(true)
])
It doesn't work, i.e. I enter the address 'http://localhost/admin/signin', browser is loading, but I don't get 'signin.html' template. I need to use 'admin' state in order to use a 'resolve' function for all child states (my example is not complete). What's the trouble ? Thanks in advance!
Almost each parent should have a template - the one which will be a target for its child. There is a working plunker.
So just adding this line to the parent definition: template: "<div ui-view></div>" - will make that code working:
.state('admin', {
abstract: true,
template: "<div ui-view></div>"
})
What happened is - child does have its target, the anchor where it could be injected.
There could be other solution, e.g. child is targeting the root ui-view="" ... but above solution is appropriate... See View Names - Relative vs. Absolute Names, check this answer and its plunker with more examples of absolute name targeting
Check it in action here