I am trying to use jumbotron in my Angular 2 sample project but its not all rendering anything .
I have used updated CDNs in index.html :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
my app.component looks like
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: `mytemplate.html`,
})
export class AppComponent {
}
mytemplate.html looks like
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
but it is not getting rendered. It keeps showing loading appcomponent content here . Do i need to install any external packages to get it running . I am using Visual Studio Code. Thanks in advance
Related
I added a paralla code to my page, but the images don't appear, when I remove the class "parallax" from container of the image, images appear but without the parallax effect,
<div class="parallax-container">
<div class="parallax"><img src="content/img/wood.jpg"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="content/img/wood.jpg"></div>
</div>
<script type="text/javascript">
var elem = document.querySelector('.parallax');
var instance = M.Parallax.init(elem, options);
// Or with jQuery
$(document).ready(function(){
$('.parallax').parallax();
});
</script>
and these are the libraries I added
<script src="app\lib\angular.min.js"></script>
<script src="app\lib\angular-route.min.js"></script>
<script src="app\lib\angular-aria.min.js"></script>
<script src="app\lib\angular-messages.min.js"></script>
<script src="app\lib\angular-animate.min.js"></script>
<link rel="stylesheet" href="app\lib\angular-material.min.css">
<script src="app\lib\angular-material.min.js"></script>
<link rel="stylesheet" href="content/css/styles.css">
<!--Materialize-->
<link href="materialize\css\icon.css" rel="stylesheet">
<link rel="stylesheet" href="materialize/css/materialize.min.css">
<link rel="stylesheet" href="app\lib\Roboto.css">
<script src="app\app.js"></script>
<script type="text/javascript" src="materialize\js\jquery.3.2.1.min.js"></script>
<script src="materialize\js\materialize.min.js"></script>
Your error lies in trying to init the function twice in your Javascript code. Also (well at least on my end), I do occasionally receive errors using vanilla JS while intializing components for materialize. What you could do: (remove the vanilla JS code and add this to the end of your file, preferably below the end of body tag)
<script>
$(document).ready(function(){
$('.parallax').parallax();
});
</script>
Make sure you call the jquery before the materialize script like so:
<script type="text/javascript" src="materialize\js\jquery.3.2.1.min.js">
</script>
<script src="materialize\js\materialize.min.js"></script>
I am trying to learn Angularjs2 and make my first app but its not working fine and also not showing any error. I have made "my-app" component with some html "Angular 2 First App Here is my component", this one is working fine but when I have made new component named "my-component" with text "Hi, I am {{name}}" its not showing in the browser.
Also when I am trying to remove text form "my-app" like:
Text is: "Angular 2" so it shows my previous text which is "Angular 2 First App"
Please check what I am doing wrong in the below code:
index.html:
<!doctype>
<html>
<head>
<base href="/angular2_project/">
<title>Angular 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>
<link rel="stylesheet" href="src/css/app.css">
</head>
<body>
<my-app>Loading...</my-app>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</body>
</html>
boot.ts:
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./app.component";
bootstrap(AppComponent);
app.component.ts:
import {Component} from 'angular2/core';
import {MyComponentComponent} from './my-component.component';
#Component({
selector: 'my-app',
template: `
<h1>Angular 2 First App</h1>
<h2>Here is my component</h2>
<my-component></my-component>
`,
directives: [MyComponentComponent],
})
export class AppComponent {
}
my-component.component.ts:
import {Component} from 'angular2/core';
#Component({
selector: 'my-component',
template: `
Hi, I am {{name}}
`,
})
export class MyComponentComponent {
name = 'Ovais';
}
I read ngbook2. And I try to create hello-world application on angular2.
But I get error 404:
GET /node_modules/angular2/bundles/angular2.dev.js 404 5.460 ms - 58
app.ts:
import { bootstrap } from "#angular/platform-browser-dynamic";
import { Component } from "#angular/core";
#Component({
selector: 'hello-world',
template: `
<div>
Hello world
</div>
`
})
class HelloWorld {
}
bootstrap(HelloWorld);
index.html:
<!doctype html>
<html>
<head>
<title>Angular 2 - Simple Reddit</title>
<!-- Libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="resources/vendor/semantic.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<script src="resources/systemjs.config.js"></script>
<script>
System.import('app.js')
.then(null, console.error.bind(console));
</script>
<hello-world></hello-world>
</body>
</html>
Look like the problem is in line
But I newbie in angular and have not idea about how can I correct this line.
How can I fix this app?
I have read documentation
And I see I must change libraries URLs in index.html to these:
<!-- Libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
In my CakePHP project I've put all my css and js files in 'app/webroot' folder and index.ctp is loaded with all designs. But add.ctp and edit.ctp files are load without css/js files in '../webroot'.
$this->layout = 'newlayout';
I put this code in my andex(), add() and edit() action in 'controller' file.
My newlayout.ctp file code is
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title_for_layout; ?></title>
<!-- Tell the browser to be responsive to screen width -->
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- Bootstrap 3.3.4 -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- FontAwesome 4.3.0 -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons 2.0.0 -->
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link href="dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
<!-- iCheck -->
<link href="plugins/iCheck/flat/blue.css" rel="stylesheet" type="text/css" />
<!-- Morris chart -->
<link href="plugins/morris/morris.css" rel="stylesheet" type="text/css" />
<!-- jvectormap -->
<link href="plugins/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
<!-- Date Picker -->
<link href="plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
<!-- Daterange picker -->
<link href="plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<!-- bootstrap wysihtml5 - text editor -->
<link href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="#" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>POS</b> App</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<!-- Notifications: style can be found in dropdown.less -->
<!-- Tasks: style can be found in dropdown.less -->
<!-- User Account: style can be found in dropdown.less -->
<!-- Control Sidebar Toggle Button -->
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
<?php echo $this->Session->flash(); ?>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<?php echo $this->fetch('content'); ?>
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
<footer class="main-footer">
<strong>Copyright © 2014-2015 .</strong> All rights reserved.
</footer>
<!-- Control Sidebar -->
<div class='control-sidebar-bg'></div>
</div><!-- ./wrapper -->
<!-- jQuery 2.1.4 -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.2 JS -->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="plugins/morris/morris.min.js" type="text/javascript"></script>
<!-- Sparkline -->
<script src="plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js" type="text/javascript"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
<!-- jQuery Knob Chart -->
<script src="plugins/knob/jquery.knob.js" type="text/javascript"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js" type="text/javascript"></script>
<script src="plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<!-- datepicker -->
<script src="plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<!-- FastClick -->
<script src='plugins/fastclick/fastclick.min.js'></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js" type="text/javascript"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js" type="text/javascript"></script>
</body>
</html>
I've checked the request response for 'add' pageload and i got this response -
The action bootstrap is not defined in controller
and each request for css and js file got this kind of error response!
I've no clue!
You should use CakePHP Helper to include assets file(css, js etc). Let's see how to use include css files?
<head>
<?php echo $this->Html->css(array('forms', 'tables', 'menu')); ?>
// forms, tables, menu are the css file thoese are locate under app/webroot/css directory
</head>
Look HtmlHelper::css on CakePHP 2.x
The error you have described,
The action bootstrap is not defined in controller
...is telling you that the action/route you are attempting to load, bootstrap(), is not a function found in that controller.
The above issue is likely unrelated to loading bootstrap. Double-check the route/URL you are attempting to access. If it is http://example.com/controller/bootstrap then the function (action) bootstrap() must be defined in that controller.
Once that is dealt with, you can find a working example of using Twitter Bootstrap with CakePHP in the source of this app on GitHub, which powers stats.chrisvogt.me.
In this example I am using a hosted version of Bootstrap, but in the line below it you'll find an extension called Jasny Bootstrap that is located in ./app/webroot/components/jasny-bootstrap/[...]jasny-bootstrap.min.css.
Also, in case you don't want to repeatedly define $this->layout in each of those actions: you can define a default custom layout for all actions using beforeFilter() in the AppController like so, or you can do this in individual controllers if you wish.
While not required, I'm a fan of using Bower to manage my front-end components (such as Bootstrap). Should you feel like looking into this, make sure to define a custom install directory somewhere under ./webroot.
No errors in the Javascript console, all resources seem to be loading, but the datepicker doesn't pop up when the input text field is clicked.
app.js
var app = angular.module('appform', ['ngSanitize','ui.bootstrap', 'leaflet-directive']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {templateUrl: 'partials/landmark-list.html', controller: LandmarkListCtrl}).
}]);
HTML
<div class="control-group input-append">
<input type="text" ng-model="landmark.time.start" data-date-format="dd/mm/yyyy" bs-datepicker>
<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
</div>
index.html Resources
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link href="css/flat-ui.css" rel="stylesheet">
<script src="lib/jquery/jquery-1.10.1.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-sanitize.min.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="lib/angular/ui-bootstrap-0.3.0.min.js"></script>
<script src="lib/angular-leaflet-directive.js"></script>
<script src="lib/bootstrap-datepicker.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
Although this is an old question, but I thought this may help some in the future. I found that flat-ui CSS and angular ui's datepicker do not behave well with each other. I faced the same issue and through trial and error found that removing flat-ui.css from my imports made the datepicker appear.
The solution that worked for me was to add the following custom css.
ul.dropdown-menu {
visibility: visible;
opacity: 1;
}