why the view not display on angular js? - javascript

I am trying to display a view using angular js using module form .could you please tell me why it is not display my view or page
I share my code on this link
http://goo.gl/ocBdQ5
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/foundation.css" />
<script src="lib/angular.js" type="text/javascript"></script>
<script src="lib/angular-ui-router.js" type="text/javascript"></script>
<script src="js/firtdir/module.js" type="text/javascript"></script>
<script src="js/firtdir/router.js" type="text/javascript"></script>
<script src="js/firtdir/controller/firstcontroller.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body >
<div ng-app="firstApp">
<div ui-view="app"></div>
</div>
</body>
</html>

I have fixed the following issues and now your sample is working.
Demo: http://goo.gl/3eh5hz
Issues Fixed
index.html >> Directory name is corrected as "firstdir" in url
Routes >> controller should be inside views as follows
$stateProvider.state('app', {
url: '/app',
views:{
app:
{
templateUrl: 'js/firstdir/templates/firstpage.html',
controller:"firstcont"
}
}
});

Related

In angular 2 how do I hook up my cachebust js files to the app for deploying?

This is my gulp code for cache busting the js files and it works fine:
gulp.task('getAllJsFiles', function() {
gulp.src('src/app/**/**/*.js')
.pipe(cachebust.resources())
.pipe(gulp.dest('src/app/js/'))
});
The problem I have is, how do I now wire up these files so that my app uses them?
I'm using angular and typescript.
Currently the app.component.js file becomes: Current the app.component.js file becomes: app.component.e072d853.js as an example.
I'm guessing I would just wire that up?
Here is my index file stripped down a bit:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/"></base>
<!-- inject:css -->
<link rel="stylesheet" href="/css/styles.e072d853.css">
<!-- endinject -->
<!-- Js libs -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
<script type="text/javascript" src="/safariPolyFix.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"></script>
<script>
System.config({
transpiler: 'typescript',
defaultJSExtensions: true,
typescriptOptions: {
emitDecoratorMetadata: true,
},
packages: {
'angular2-google-maps': {
defaultExtension: 'js'
}
}
});
</script>
<script type="text/javascript" src="/angular2_google_maps.js"></script>
<script type="text/javascript"src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script type="text/javascript"src="https://code.angularjs.org/tools/typescript.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/angular2.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/router.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/http.js"></script>
<script type="text/javascript" src="/firebase/firebaseNew.js"></script>
</head>
<body id="container">
<app></app>
<script type="text/javascript">
//Not sure if I need to do something here??????
System.import('/app/app.component.js');
</script>
</body>
</html>
Heres the js part of my gulp file (which works fine):
gulp.task('getAllJsFilesAndCacheBust', function() {
gulp.src('src/app/**/**/*.js')
.pipe(cachebust.resources())
.pipe(gulp.dest('src/app/js/'))
});
I just need to know how to wire up the app.component.js thats now this: app.component.685d875q.js. I cant seem to get that imported

Using wijmo event calender with angularjs

Hell, I'm trying to use the wijmo event calender with the AngularJS liabry, but the appointments binding isn't working correctly.
This is my html:
<html>
<head>
<title>Control Tests</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet"
title="metro-jqueryui" type="text/css" />
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.7.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20131.7.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.7.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://cdn.wijmo.com/external/globalize.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="http://cdn.wijmo.com/external/angular.wijmo.js" type="text/javascript"></script>
<script src="../../Scripts/Controller/MainController.js" type="text/javascript"></script>
</head>
<body>
<script>
$(document).ready(function () {
$(".wijevcal").wijevcal();
});
</script>
<div ng-app ng-controller="MainController">
<div class="wijevcal" appointments="{{calAppointments}}"></div>
</div>
</body>
</html>
And this is the source of the Controller:
function MainController($scope)
{
$scope.calAppointments = [{
start: new Date(2013, 5, 23, 15, 30)
}];
}
Can someone tell me, why the start date isn't applied to the calendar?
Yes, you need to add the Wijmo module in order to use the custom directives provided by Wijmo.
I fixed it on my own.
I had to call
var app = angular.module("MyApp", ["wijmo"]);
at the beginning of the script and now I can use the tag
<wijevcal></wijevcal>

Redirect to whole new page

How can I redirect a user to a new whole page with AngularJS? I'm currently using ng-view, but problem with ng-view is that the other page is "included" in existing page:
<!DOCTYPE html>
<html ng-app="gameApp">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta content="text/html;charset=UTF-8" http-equiv="content-type" />
</head>
<body ng-controller="firstPageCtrl">
<div id="layout">
<div id="topcontent">
</div>
<div id="middlecontent">
<div ng-view></div>
</div>
<div id="bottomcontent">
{{"AngularJS"}}
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.22/angular-route.js"></script>
<script src="https://code.angularjs.org/1.2.22/angular-sanitize.js"></script>
<script src="js/mastercontroller.js"></script>
</html>
As you can see, the page is included between , but I don't want that, I want to redirect the user to a whole new page. How can I do this?
Here is my route:
gameApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/firstpage.html',
controller : 'firstPageCtrl'
})
.when('/game', {
templateUrl : 'partials/game.html',
controller : 'gameCtrl'
});
});
To redirect to external URL, use the $window service.
$window.location.href = 'http://www.google.com';
https://docs.angularjs.org/api/ng/service/$window

Does Plunker Support Multiple Views?

I am learning AngularJS and trying to test routes. I am wondering if Plunker supports this so that I can navigate different pages.
*Clicking "Log in" returns Preview does not exist or has expired. in the View
Plunker Demo
HTML
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8" />
<title>Into to Angular.js</title>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body>
<div class="row">
<div class="col-sm-12">
<h1>Intro to Angular</h1>
<div id="view" ng-view></div>
</div>
</div>
<button class="btn" onclick="location.href = '/login.html'">Login Page</button>
</body>
</html>
JS
var app = angular.module("app", []).config(function($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
});
});
app.controller('LoginController', function () {
});
Yes, it is possible to use the client-side navigation in the plunker.
Example plunker: http://plnkr.co/edit/XH8yfhvbFpeP4l0EmJ8S?p=preview
Instead of modifying the location.href yourself, you have to use $location.path() or just use a simple a tag like this:
Login
In order to use the $routeProvider, you have to include the ngRoute module file:
<script src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
And put 'ngRoute' as a depencendy of the app module:
var app = angular.module("app", ['ngRoute'])

angularjs import makes html page not functional

I have very simple code
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
<script type="text/javascript" src="assets/js/angular.min.js" />
<script type="text/javascript" src="assets/js/app.js" />
</head>
<body>
asdfasdf
{{1+2}}
</body>
</html>
and I'm pretty sure everything is pointing to the right directory. My app.js is:
( function () {
var app = angular.module( 'app' , [] );
}) ();
However, opening index.html on localhost all I can see is a blank page but when I delete the lines
<script type="text/javascript" src="assets/js/angular.min.js" />
<script type="text/javascript" src="assets/js/app.js" />
I get a page that says "asdfasdf {{1+2}}" How can I get angular working? Is there a big mistake I'm making somewhere?
Script tags must have an end tag. They cannot be self-terminating.
<script type="text/javascript" src="assets/js/app.js"></script>

Categories